Production of "D3.js Starter Series---9.6" package drawing

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

Packing diagram (pack), which is used to contain the relationship to be included, also represents the weights of individual objects, usually with a round set of a circle to represent the former, the size of the circle to represent the latter.

First look at the data used in this section: City2.json

This is the data for each city's affiliation. We are now going to use the D3 layout to transform the data, making it easy to visualize.

var pack = D3.layout.pack ()    . Size ([width, height])    . Radius (20);

The pack function is defined above, and size () is the dimension of the converted data, that is, the (x, y) of the transformed vertex, which is within the size range. Radius is the radius that is used to set the smallest circle after conversion. The next step is to read the JSON file and provide the file contents to the Pack function for transforming the data.

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

The above uses the pack to convert the data into vertex nodes and link links respectively, and the console.log of the latter two sentences is used to output the converted data. Let's see what the data is converted to.

The above picture is the content of vertex nodes, we can see that the data is converted, the depth information (depth), radius size (r), coordinate position (x, y) and so on. I don't have any pictures of links, because we don't draw lines in this section.no matter what layout is used to transform the data, we must first look at what the converted data is and then draw it, otherwise it is easy to make mistakes. The content we want to draw has circles and text, all drawn in SVG. The code is as follows:

Svg.selectall ("Circle"). Data (nodes). Enter (). Append ("Circle"). attr ("Fill", "RGB (119,)"). attr ("fill-opacity "," 0.4 "). attr (" CX ", function (d) {return d.x;}). attr ("Cy", function (d) {return d.y;}). attr ("R", function (d) {return D.R;}). On ("MouseOver", function (d,i) {d3.select (this). attr ("Fill", "Yellow");}). On ("Mouseout", function (d,i) {d3.select (this). attr ("Fill", "RGB (31, 119, 180)");});

This is the code to draw the circle, see the previous sections of the friends must have been very familiar with it.
The result diagram is as follows:
Mouse operation content, please click on the link below to try it yourself: http://www.ourd3js.com/demo/pack.html complete code, please right click on the browser to view.