Package diagram for the "D3.js Starter Series---9.6" production

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

Packing diagram (pack). Used to include the relationship with the included, also represents the weight of the individual objects, pass often use a round set of a circle to denote the former, with the size of the circle to indicate 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 layout of D3 to transform the data so that it can be visualized with easy visualization.

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

The pack function is defined above. Size () is the size of the converted data, which is the (x, Y) of the converted vertex. will be within this 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. The console.log of the latter two sentences is used to output the converted data. Let's see what the data is converted to.

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvbhpobhp6/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/southeast "> The picture above is the content of the vertex nodes. We can see. After the data is converted, the depth information (depth), the radius size (r), is more. Coordinate position (x, y) and so on. I don't have any pictures attached to links.    Since we are not properly wired for this section to draw. no matter what layout is used to transform the data, we must first look at what the converted data is. To draw again. Otherwise very easy error.

The content we want to draw has circles and text. are plotted 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 resulting diagram is as follows:
Mouse operation content, please click on the following link yourself try: http://www.ourd3js.com/demo/pack.html complete code, right click on the browser to view.

Copyright notice: This article blog original articles, blogs, without consent, may not be reproduced.

D3.js Starter Series---9.6 "package drawings for production