"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.

The cluster diagram (Cluster) pass is often used to denote inclusion with the included relationship.

Now we're giving the data. and visualize it. The contents of the data are: some of the provinces included 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 your own Baidu encyclopedia and so on. Data such as the following:

{"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're looking at data from the light. Also very easy to see what they are used to indicate. What the relationship is. Well, start visualizing now.

In the same way, the data must be converted to Layout first.

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.

Be careful. D3.json can only be used for network reading. So you have to build a server to use it. For example, using Apache to build a simple server to do experiments. Suppose you put the Web page source file and the JSON file in the local directory. The following error message will appear:
XMLHttpRequest cannot load File:///C:/Users/lzhlzz/Dropbox/lzh/d3js/9.4/city.json. Cross origin requests is only supported for HTTP.

The JSON function is followed by a nameless function, where the root of the reference is used to read the contents of the data. The next two lines of code call cluster to transform the data separately. and save them in nodes and links.

The next two lines are used to output the converted data file. For example, as seen in:

Nodes

Links

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbhpobhp6/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast ">

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 are able to draw.

In fact D3 has basically prepared the function for us to draw. We have to learn but query and use them.

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. This is no longer the case. I've already talked about it before. You can also view the source code yourself. The result diagram is:

If you want to view the source code, please click on the following URL. Right-click the browser to select View:

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

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