"D3.js Advanced Series-2.0" mechanical diagram + Figure diagram

Mechanical diagram (Force roadmap) combines the common people's life in the diagram, which is more interesting.

This article will take this as evidence of how the graph is inserted into the external image and the mechanics of the text.

One of the simplest mechanics diagrams is produced in Chapter 9.2. After a lot of friends have questions, the basic questions include:

• How to insert text next to a ball
• How to change a ball to another shape
• How to insert a picture
• How to limit the boundary of ball motion

This article will explain the above questions in turn. The first three points are the SVG element problem. is not much associated with D3.

1. SVG Images

SVG's picture elements are explained in detail in "Official documents-Images". Usually, we just need to use five attributes of the image element to be sufficient.

<image xlink:href= "Image.png" x= "$" y= "$" width= "height=" ></image>

Of

• Xlink:href-image name or image URL
• X-picture sit up corner x coordinate
• Y-The picture sits on the upper corner y coordinate
• Width-Image width
• height-Picture Height

Insert a picture in D3 with the following code:

Svg.selectall ("image"). Data (DataSet). Enter (). Append ("image"). attr ("x"). attr ("Y", "$"). attr ("width", 100). attr ("height", "+"). attr ("Xlink:href", "image.png");

2. SVG text

SVG's text element is similar to a picture, and the specific attributes are "Official document-text".

<text x= "" "y=" "dx=" "dy=" "font-family=" Verdana "" font-size= "fill=" "Blue" >Hello</text>

Of

• X-Text x-coordinate
• Y-Text y-coordinate
• Dx-x text shift in axis direction
• Dy-y text shift in axis direction
• Font-family-Font
• Font-size-Font Size
• Fill-Font Color

Insert text in D3, code like:

Svg.selectall ("text"). Data (DataSet). Enter (). Append ("text"). attr ("x"). attr ("Y", "Max"). attr ("DX"). attr ("dy" ). Text ("Hello");

3. Source Files

Next make the source file of the mechanics diagram. This time the data is written to the JSON file.

Oh. Borrow a "Paladin 4" character. I am also a Chinese paladin, looking forward to the July 15 "Chinese Paladin 6" listing.

{"Nodes": [{"Name": "Skylight River"   , "image": "Tianhe.png"},{"name": "Han Yu yarn"   , "image": "Lingsha.png"},{"name": "Liu Meng Glass" 
   , "image": "Mengli.png"},{"name": "Murong Violet UK", "image": "Ziying.png"}], "edges": [{"source": 0, "target": 1, "relatio N ":" Best friend "},{" source ": 0," target ": 2," Relation ":" Best friend "},{" source ": 0," target ": 3," relation ":" Best Friend "}]}

As above, add data to the JSON file. And then put the picture file and the JSON file in the same folder can be (where the line, the most important is to see how the program is implemented).

4. Mechanics Figure 4.1 Read in file

Read in the JSON file, this should be very familiar with it. Otherwise you can first look at "chapter 9.4".

D3.json ("Relation.json", function (error,root) {if (error) {return Console.log (error);} Console.log (root);}

4.2 Defining the layout of the mechanics diagram

The layout of the Mechanics diagram (layouts) is as follows:

var force = D3.layout.force (). nodes (Root.nodes). Links (root.edges). Size ([Width,height]). Linkdistance (- ). Start ();

The linkdistance is the distance between nodes, charge is the definition of whether the nodes are attracted (positive values) or mutually exclusive (negative values), the greater the stronger the value.

4.3 Draw the connector line

The code for drawing links between nodes is as follows:

var edges_line = Svg.selectall ("line"). Data (Root.edges). Enter (). Append ("line"). Style ("Stroke", "#ccc"). Style (" Stroke-width ", 1); var edges_text = Svg.selectall (". Linetext "). Data (Root.edges). Enter (). Append (" text "). attr (" class ") , "Linetext"). Text (function (d) {return d.relation;});

第1-6 Line: Draw a line

第8-15 Line: Draw text on a line

The style of text on a line is:

. linetext {font-size:12px; Font-family:simsun;fill: #0000FF; fill-opacity:0.0;}

Fill-opacity is transparency, 0 means total transparency, and 1 is completely opaque. This is 0. Indicates that the initial state is not displayed.

4.4 Plotting nodes

Draw the picture and text of the node:

var nodes_img = Svg.selectall ("image"). Data (Root.nodes). Enter (). Append ("image"). attr ("width", img_w). attr ("height" , Img_h). attr ("Xlink:href", function (d) {return d.image;}). On ("MouseOver", function (d,i) {d.show = true;}). On ("Mouseout", function (d,i) {d.show = false;}). Call (Force.drag), var text_dx = -20;var Text_dy = 20;var Nodes_text = Svg.selectall (". Nodetext"). Data (Root.nodes). Enter ( ). Append ("text"). attr ("Class", "Nodetext"). attr ("DX", TEXT_DX). attr ("dy", Text_dy). Text (function (d) {return d.name;});

第1-16 Line: Drawing a picture

第10-15: When you move the mouse over the picture. Displays the text on the connector you want to associate with this node. This is just a Boolean assignment for D.show. This value is used in subsequent updates.

第21-30: Draw text below the picture

4.5 Update

To keep the mechanics diagram up to date, use Force.on ("tick", function () {}), which means that each step of the update calls the function functions.

Force.on ("tick", function () {//Restriction node boundary Root.nodes.forEach (function (d,i) {d.x = D.X-IMG_W/2 < 0?)
IMG_W/2: d.x;d. x = d.x + img_w/2 > width? WIDTH-IMG_W/2: d.x;d. y = d.y-img_h/2 < 0?
IMG_H/2: D.y;d. y = d.y + img_h/2 + text_dy > height? HEIGHT-IMG_H/2-text_dy:d.y;}); /Update the location of the cable edges_line.attr ("x1", function (d) {return d.source.x;}); Edges_line.attr ("Y1", function (d) {return d.source.y;}); Edges_line.attr ("X2", function (d) {return d.target.x;});  Edges_line.attr ("Y2", function (d) {return d.target.y;}); Update the position of text on the connector edges_text.attr ("X", function (d) {return (d.source.x + d.target.x)/2;});  Edges_text.attr ("Y", function (d) {return (d.source.y + d.target.y)/2;});  Whether to draw the text on the connector Edges_text.style ("Fill-opacity", function (d) {return D.source.show | | d.target.show 1:0.0;}); Update the node image and text nodes_img.attr ("X", function (d) {return D.X-IMG_W/2;});  Nodes_img.attr ("Y", function (d) {return D.Y-IMG_H/2;}); Nodes_text.attr ("X", function (d) {return d.x}); Nodes_text.attr ("Y", function (d) {return d.y + IMG_W/2;});});

5. Results

The results are as follows:

Click on the address below, right-click on the browser to view the full code: http://www.ourd3js.com/demo/J-2.0/relationforce.html

6. Concluding remarks

In the "Getting Started series", the most questioned is "tree chart", I want to solve the problem first. But because I have some problems not to be clear. So it's easier to write this article first. Next there will be a few about the mechanics diagram, the tree chart of the arrangement to drag a little time.

Thank you for reading.

Document Information

• Copyright Notice: Attribution (by)-Non-commercial (NC)-No deduction (ND)
• Published: October 25, 2014
• A lot of other content: our D3. JS-Data Visualization special station and CSDN personal blog
• NOTE: Reprint please indicate the source, thank you

"D3.js Advanced Series-2.0" mechanical diagram + Figure diagram