"D3.js Advanced Series-3.0" Partition map

Source: Internet
Author: User

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:


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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.