[D3.js pro series-4.0] matrix tree, d3.js4.0

[D3.js pro series-4.0] matrix tree, d3.js4.0

A matrix tree (Treemap) is also an extension of hierarchical layout. areas are divided into rectangular sets based on data. The size and color of the rectangle are the reflection of data. As shown in figure 1, many portal websites arrange photos in rectangles of different sizes. This is the application of the matrix tree.

Fig. 1 http://www.texastribune.org/2010/10/07/treemap-reveals-campaign-ad-trends/

The GDP of Zhejiang, Guangxi, and Jiangsu Provinces in 2013 is used as data, and the node weight of GDP is used as a matrix tree.

1. Data

Create a new citygdp. json file with the following content:

{"Name": "China", "children": [{"name": "Zhejiang", "children": [{"name": "Hangzhou ", "gdp": 8343 },{ "name": "Ningbo", "gdp": 7128 },{ "name": "WenZhou", "gdp": 4003 }, {"name": "Shaoxing", "gdp": 3620 },{ "name": "Huzhou", "gdp": 1803 },{ "name ": "Jiaxing", "gdp": 3147 },{ "name": "Jinhua", "gdp": 2958 },{ "name": "Quzhou", "gdp ": 1056 },{ "name": "Zhoushan", "gdp": 1021 },{ "name": "Taizhou", "gdp": 3153 },{ "name ": "Lishui", "gdp": 983}]}, ****************************]}

Each leaf node contains the name and gdp, the name is the node name, and the gdp is the node size. The omitted data also contains cities in Guangxi and Jiangsu Provinces.

2. layout (data conversion)

Create a matrix tree layout with the size set to [width, height], that is, the size of the SVG canvas. The value accesser is set to gdp. The Code is as follows:

var treemap = d3.layout.treemap().size([width, height]).value(function(d){ return d.gdp; });

After setting the value accessors, each node will have the variable value and its value is the value of gdp. If all nodes are subnodes, the gdp value is the sum of the subnode values. For example, the gdp of the node "Zhejiang" is the sum of the gdp of cities in the province. Request the file with d3.json and then convert the data.

d3.json("citygdp.json", function(error, root) {var nodes = treemap.nodes(root);var links = treemap.links(nodes);console.log(nodes);console.log(links);}

After the data is converted, the output result of the node array is 2. The Node object attributes include:

• Parent: parent node
• Children: subnode
• Depth: node depth
• Value: the value of the node, determined by the value accessor.
• X: x coordinate of the node
• Y: y coordinate of the node
• Dx: x-direction width
• Dy: width in the y direction

Figure 2

Output 3 of the line array. Each line object contains source and target, which are the two ends of the line respectively.

Figure 3

3. Draw

In this example, no line is drawn and only a node array is used. It is easy to draw nodes. Add enough grouping elements to the number of nodes, and add <rect> and <text> to <g>.

var groups = svg.selectAll("g").data(nodes.filter(function(d){ return !d.children; })).enter().append("g");var rects = groups.append("rect").attr("class","nodeRect").attr("x",function(d){ return d.x; }).attr("y",function(d){ return d.y; }).attr("width",function(d){ return d.dx; }).attr("height",function(d){ return d.dy; }).style("fill",function(d,i){ return color(d.parent.name); });var texts = groups.append("text").attr("class","nodeName").attr("x",function(d){ return d.x; }).attr("y",function(d){ return d.y; }).attr("dx","0.5em").attr("dy","1.5em").text(function(d){ return d.name + " " + d.gdp; });

Result 4.

Figure 4

For the complete code, click the following link and right-click to view the source code:

Http://www.ourd3js.com/demo/G-4.0/treemap.html

4. Conclusion

So far, all the la s in D3 have been explained. The [entry series] describes 6 la S, 2 [advanced series], and 3 [advanced series], with 11 la s in total.

D3 provides a total of 12 la S: Pie, Force, Chord, Tree, and Cluster) bundle, Pack, Histogram, Partition, Stack, and Treemap) hierarchy ).

In the 12 la S, Hierarchy cannot be used directly. Cluster, package, partition, tree, and matrix are extended by Hierarchy, there are 11 available la S.

Because the word "layout" may make beginners think of it as "Drawing", the layout is only used to calculate which element is displayed. Intuitively, the layout function is to convert a data type into another data type, and the converted data is conducive to visualization. Therefore, the tutorials on this site refer to the layout as "Data Conversion ".

Of course, you can also understand the original word "layout" or "computing" as long as you know what it means.

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, April 4, 2015
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: This article is published in OUR D3.JS. For more information, see the source. Thank you.