"D3.js Starter Series---10.2" draggable map

My personal blog is: www.ourd3js.com

CSDN Blog for: blog.csdn.net/lzhlzz

Reprint please indicate the source, thank you.

This section is a mechanical-oriented map of China, combined with sections 9.2 and 10, where users can drag various provinces of China.

The data is a simplified Chinese map file in section 10.1: China_simplify.json

1. Define each function

var projection = D3.geo.mercator (). Center ([107]). Scale (850)    . Translate ([WIDTH/2, HEIGHT/2]); var path = D3.geo.path (). Projection (projection), var force = D3.layout.force (). Size ([width, height]); var color = D3.scale.category20 ();

The projection function is a projection function used to project the coordinates of a three-dimensional map into two dimensions. Specifically visible: 10 knots

The path function is used to draw the map path, which is passed into the projection function projection. Specifically visible: 10 knots

Force is the layout that defines the mechanics diagram. Specifically visible: 9.2 knots

Color is a function of colors.

2. Reading data

D3.json ("China_simplify.json", function (error, root) {if (error) return Console.error (Error); Console.log ( Root.features);}

As in the previous sections, the file is read with D3.json (), and the following two sentences are used to detect errors and output error messages.

3. Converting Data

var nodes = [];var links = [];root.features.foreach (function (d, i) {var centroid = path.centroid (d); centroid.x = centroid[ 0];centroid.y = Centroid[1];centroid.feature = D;nodes.push (centroid);}); var triangles = D3.geom.voronoi (). triangles (nodes); Triangles.foreach (function (d,i) {Links.push (Edge (d[0], d[1])); Links.push (Edge (d[1], d[2]); Links.push (Edge (d[2], d[0]);});

The read file information exists in the variable root, the above code is to convert the data in root into the points and lines required by the mechanics diagram, there are variables nodes and links.
1–2 rows: Defining variables nodes and links

4–10: For each province in the Root.features data, Root.features.forEach () is the data for each province, execute the following nameless function, the function is to calculate the midpoint of the provinces, saved in the centroid.x and CENTROID.Y, the other information is assigned to centroid.feature and finally inserted into nodes.

Line 12th: Triangulation the vertices in the nodes, that is, the triangles are used to connect the vertices, and the results are saved in the triangles.

第14-18: Saves the sides of the triangle to the links variable. The implementation of the Edge function is:

function Edge (A, b) {var dx = a[0]-b[0], dy = a[1]-b[1];return {source:a,target:b,distance:math.sqrt (dx * dx + dy * DY)};}

4. Draw a map

force.gravity (0). Charge (0). Nodes (nodes). Links (links). linkdistance (function (d) {return d.distance;}). Start (); var node = Svg.selectall ("G"). Data (nodes). Enter (). Append ("G"). attr ("Transform", function (d) {return " Translate ("+-d.x +", "+-d.y +") ";}". Call (Force.drag). Append ("path"). attr ("Transform", function (d) {return "translate (" + D.x + "," + D.y + ") "; })        .        attr ("Stroke", "#000"). attr ("Stroke-width", 1). attr ("Fill", function (d,i) {return color (i);        }). attr ("D", function (d) {return path (d.feature); }); var link = svg.selectall ("line"). Data (links). Enter (). Append ("line"). attr ("Class", "link"). attr ("x1", function (d) {return d.source.x;} ). attr ("Y1", function (d) {return d.source.y;}). attr ("X2", function (d) {return d.target.x;}). attr ("Y2", function (d) {return d.target.y;}); 

第1-6: Set the parameters of force to set.
第8-22: Draw each vertex, that is, the provinces of China.It is important to note that lines 11th and 14th are the exact opposite of the two translation functions, yes, this is to move the past, and then move back, that is, the initial display is the province of the complete map and displayed in the original set position, because the drag process of the amount of change is d.x and d.y, so to do so. Here is a bit difficult to understand, please have a good experience, if in doubt, please leave a message below. In addition, line 12th is called the Force.drag function.

第24-32 Line: Draw lines that connect the provinces.

5. Combination of Mechanics diagram

Force.on ("tick", function () {    link.attr ("x1", function (d) {return d.source.x;})        . attr ("Y1", function (d) {return d.source.y;})        . attr ("X2", function (d) {return d.target.x;})        . attr ("Y2", function (d) {return d.target.y;});   Node.attr ("Transform", function (d) {      return "translate (" + D.x + "," + D.y + ")";   } ";});

Here as in section 9.2, tick refers to the time interval, that is, every time interval after the refresh of the picture, the content of the refresh is written in the nameless function functions, the function is written in the contents of the drawing. Here you see, 第7-9 is used for panning, and the parameters for panning are d.x and d.y.

result diagram:

Drag to try it, haha:

Use your own mouse to try it, click the link below, the full code please right click on the browser and choose to view:

Http://www.ourd3js.com/demo/mapforce.html

Thank you for reading.

"D3.js Starter Series---10.2" draggable map