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

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.

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

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.