[D3.js advanced series-3.0] partition graph, d3.js3.0

[D3.js advanced series-3.0] partition graph, d3.js3.0

The Partition graph is also a Layout of D3 ). This layout is very interesting. It can be made into a square or a circle. This article first introduces how to create a square partition graph, which is also the most basic form of a partition graph.

A partition chart is also used to indicate the relationship between the contained and the contained.

1. Data

This article uses the data in Chapter 9.4, which describes the relations between cities in China.

2. layout (data conversion)

var partition = d3.layout.partition().sort(null).size([width,height]).value(function(d) { return 1; });

Row 3: partition Graph Layout.

Row 2nd: sort sets the internal vertex sorting function. null indicates not sorting.

Row 3rd: size specifies the range of the converted graph. This value is very important. It can be changed to a circular partition graph after proper use.

Row 3: value indicates the partition size. If the size value is used in the data file to indicate the node size, return d. size can be written here.

Next, read and convert the data. The Code is as follows:

D3.json ("city_tree.json", function (error, root) {if (error) console. log (error); console. log (root); // convert the data var nodes = partition. nodes (root); var links = partition. nodes (nodes); // output the converted vertex console. log (nodes );}

Let's see why the converted data is:

Several variables are added to the vertex, including:

• X: x coordinate position of the vertex
• Y: y coordinate position of the vertex
• Dx: the width of the vertex dx
• Dy: vertex height dy

3. Draw

Bind vertex data and draw the rectangle and text respectively. The Code is as follows:

Var rects = svg. selectAll ("g "). data (nodes ). enter (). append ("g"); rects. append ("rect "). attr ("x", function (d) {return d. x ;}) // x coordinate of the vertex. attr ("y", function (d) {return d. y ;}) // y coordinate of the vertex. attr ("width", function (d) {return d. dx;}) // The width of the vertex dx. attr ("height", function (d) {return d. dy ;}) // The height of the vertex dy. style ("stroke", "# fff "). style ("fill", function (d) {return color (d. children? D: d. parent ). name );}). on ("mouseover", function (d) {d3.select (this ). style ("fill", "yellow ");}). on ("mouseout", function (d) {d3.select (this ). transition (). duration (1, 200 ). style ("fill", function (d) {return color (d. children? D: d. parent ). name) ;}); rects. append ("text "). attr ("class", "node_text "). attr ("transform", function (d, I) {return "translate (" + (d. x + 20) + "," + (d. y + 20) + ")";}). text (function (d, I) {return d. name ;});

Pay attention to the above comments to understand how the converted data is used.

4. Results

Complete code. click the following link and right-click to view the source code:

Http://www.ourd3js.com/demo/J-3.0/rect_partition.html

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, November 23, 2014
• 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.