"D3.js Entry Series---9.2" mechanics diagram of the production

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