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

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