"D3.js Entry Series---9.2" mechanics diagram of the 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.

Mechanics Diagram (Force), also has to be translated to do the map, etc. This diagram is interesting, starting with the initial data, see the following code:

var nodes = [{name: "GuiLin"}, {name: "GuangZhou"}, {name: "Xiamen"},    {Name: "Hangzhou"}, {name: "Shanghai"}, {name: "Qingdao"}, {name: "Tianjin"}, {name: "Beijing"    }, {name: "Changchun"}, {name: "XiAn"}, {name: "WuLuMuQi"}, {name: "Lasa"}, {name: "Chengdu" } ]; var edges = [{source:0, target:1}, {source:1, target:2}, {source:2, target:3}, {source: 3, Target:4}, {source:4, target:5}, {source:5, target:6}, {source:6, target:7}, {sou    Rce:7, Target:8}, {source:8, target:9}, {source:9, target:10}, {source:10, target:11}, {source:11, target:12}, {source:12, target:0}]; 
There are vertices (nodes) and edges (edges), where the vertices are the city names, and the edges are the lines between the two vertices. We're going to use this data to do the mechanics diagram now. But this kind of data is not suitable for the mechanics diagram, for example does not know each vertex draws in which coordinates and so on. So we need to first use layout to transform the data, as we said, the layout in D3 is used to transform the data. The layout of force is:

var force = D3.layout.force (). nodes (nodes). Links (edges). Size ([Width,height]). linkdistance ([-100]). Start ();
In the code above:

    • D3.layout.force () is a function of the layout of the mechanics diagram
    • Array of incoming vertices in nodes ()
    • An array of edges placed in links ()
    • Size () is the scale of the scope
    • Linkdistance () to set the length between two vertices
    • Charge () is the size of the set stretch.
    • Start () indicates the beginning of the conversion
After calling this function, the data is converted, and we see what the data is converted from:
Vertex (before conversion):

Vertex (after conversion):
Can see, after conversion, more index, PX, py and so on.
Take a look at the side data: Edge (before conversion):

Edge (after conversion):
As you can see, the two index numbers of the edge data are converted directly to the data of two vertices.
Well, with this data, we can make a drawing. We use the line in SVG to draw edges and draw vertices with circle in svg.
var svg_edges = Svg.selectall ("line"). Data (Edges). Enter (). Append ("line"). Style ("Stroke", "#ccc"). Style (" Stroke-width ", 1); var color = D3.scale.category20 (); var svg_nodes = Svg.selectall (" Circle "). Data (nodes). Enter (). Append ("Circle"). attr ("R", "Ten"). Style ("Fill", function (d,i) {return color (i);}). Call (Force.drag);
We are already familiar with this code, and only the last line of code does not appear, call (Force.drag) is the setting we can drag vertices.    As we said earlier in this call function, this call is used to upload the currently selected element to the Force.drag function. Finally, we need a piece of code, as follows:
Force.on ("tick", function () {svg_edges.attr ("x1", function (d) {return d.source.x;}); Svg_edges.attr ("Y1", function (d) {return d.source.y;}); Svg_edges.attr ("X2", function (d) {return d.target.x;}); Svg_edges.attr ("Y2", function (d) {return d.target.y;});  Svg_nodes.attr ("CX", function (d) {return d.x;}); Svg_nodes.attr ("Cy", function (d) {return d.y;});});
Tick refers to thetime interval, that is, every time interval after the refresh of the picture, the content of the refresh is written in the next nameless function functions, the function is written in the contents of the drawing. Let's take a look at the final:
The dragged piece does not appear, please see here: http://www.ourd3js.com/demo/force.html code Please right click the browser to view.



"D3.js Entry Series---9.2" mechanics diagram of the 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.