"D3.js Advanced Series-3.0" Partition map

The zoning diagram (Partition) is also a layout of the D3. This layout is very interesting, can be made into a square is also possible to make a circle, this article first introduce the method of making square partition diagram, which is the most basic form of the partition diagram.

A partition diagram is also used to represent the containing relationship.

1. Data

This article uses the "Getting Started-chapter 9.4" Data, which is the affiliation of several cities in China.

2. Layout (data conversion)

var partition = D3.layout.partition (). Sort (null). Size ([Width,height]). Value (function (d) {return 1;});

Line 1th: Layout of the partition map.

Line 2nd: Sort sets the ordering function for the inner vertex, and null indicates no ordering.

Line 3rd: Size sets the range of the converted graphic, which is important and is used appropriately as a circular partition chart.

Line 4th: Value sets the values that represent the size of the partition. This means: If the data file uses a size value to represent the node size, then this can be written as return d.size.

Next read and transform the data, the code is as follows:

D3.json ("City_tree.json", function (error, root) {if (Error) Console.log (error); Console.log (root)        ; Convert data var nodes = partition.nodes (root); var links = partition.nodes (nodes);                Outputs the converted vertex console.log (nodes);}

Take a look at the converted data:

Several variables are added to the vertex, where:

• X: The x-coordinate position of the vertex
• Y: the y-coordinate position of the vertex
• DX: The width of the vertex dx
• DY: height of vertex dy

3. Draw

Bind vertex data, draw rectangles and text, respectively, with the following code:

var rects = Svg.selectall ("G")  . Data (nodes).  enter (). Append ("G"); Rects.append ("rect"). attr ("X", function (d ) {return d.x;})    The x-coordinate of the vertex. attr ("Y", function (d) {return d.y;})    The 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 ((). 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 comment, and realize how the converted data is used.

4. Results

Complete code, please click on the link below, and then right click to view the source code:

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

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: November 23, 2014
• More content: our D3. JS-Data Visualization special station and CSDN personal blog
• Remark: This article is published in our D3. JS, reproduced please indicate the source, thank you

"D3.js Advanced Series-3.0" Partition map