"D3.js Introduction Series---9.4" Production of cluster diagram

Source: Internet
Author: User

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

A cluster diagram (Cluster) is typically used to represent hierarchies, subordinates, inclusions, and contained relationships.

Now we give the data and visualize it. The contents of the data are: some of the provinces contained in China, some of the cities included in the provinces. We say that the data file is written in a JSON file and then read with D3. JSON (JavaScript Object Notation) is a lightweight data interchange format. About its grammatical rules, please consult Baidu Encyclopedia. The data are as follows:

{"Name": "China", "children": [{   "name": "Zhejiang",     "Children":    [{"Name": "    Hangzhou"},    {"name": "Ningbo"},    {" Name ":" "Wenzhou"},    {"name": "Shaoxing"}    ]   },  {"name": "Guangxi", "Children": [{"Name": "Guilin"},{"name": "Nanning"},{"name": " Liuzhou "},{" name ":" Fangchenggang "}]},{" name ":" Heilongjiang "," children ": [{" Name ":" Harbin "},{" name ":" Qiqihar "},{" name ":" Mudanjiang "},{" Name: "Daqing"}]}, {"name": "Xinjiang", "children": [{"Name": "Urumqi"},{"name": "Karamay"},{"name": "Turpan"},{"name": "Hami"}]}]
In fact, we see from the data, it is also easy to see what they are used to indicate what the relationship is. OK, now start visualizing. In the same way, you first need to transform the data with Layout.

var cluster = D3.layout.cluster ()    . Size ([height, width-200]);
The above code defines a cluster data conversion function: The size function is used to set the converted dimensions. The next step is to use this function to transform the data:

D3.json ("City.json", function (error, root) {  var nodes = cluster.nodes (root);  var links = cluster.links (nodes);    Console.log (nodes);  Console.log (links);}

The D3.json is used to read the JSON file. Note that D3.json can only be used for network reading, so you have to build a server to use it, and you can build a simple server to experiment with Tomcat.

The JSON function is followed by a nameless function, where the parameter root is used to read the contents of the data, and the next two lines of code call cluster to convert the data separately and save to nodes and links. The next two lines are used to output the converted data file, as shown in:

Nodes


Links


The nodes has child nodes, depth, name, location (x, y) information for each node. Links have node information for both ends of the connection (source, target).

With the converted data, you can draw it. In fact, D3 has basically prepared the function for us to draw, and all we have to learn is to query and use them.

To draw a line, we can use:

var diagonal = d3.svg.diagonal ()    . Projection (function (d) {return [D.y, d.x];});
This is the function used to draw a pair of dropped lines, and the. Projection is used to set its projection. When drawing, we use it this way:

var link = svg.selectall (". Link").      data (links).      enter ().      Append ("path")      . attr ("Class", "link")      . attr ("D", diagonal);
This draws the lines between all the nodes. Next we'll draw the node. Nodes are also drawn using the circle in SVG, which is not covered here, as already mentioned, you can also view the source code yourself. The result diagram is:

If you would like to view the source code, please click on the following URL, right click the browser select View:

Http://www.ourd3js.com/demo/cluster.html






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.