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

It is more interesting to combine the Mechanics Diagram (Force guide diagram) with the common figure diagrams in life. In this paper, we will explain how to insert external pictures and text in mechanics diagram.

One of the simplest mechanics diagrams is produced in Chapter 9.2. Many of our friends have questions, and the main questions are:

• How to insert text next to a ball
• How to change a ball to another shape
• How do i 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 problems with SVG elements, and there is no much association with D3.

1. SVG Images

A detailed explanation of SVG's picture elements can be seen in "official documents-Images". Usually, we only need to use five attributes of the image element to be sufficient.

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

which

• 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 elements are similar to images, and the detailed attributes are described in "Official documents-text".

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

which

• 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 write the data to the JSON file.

Oh, borrowing a "Chinese Paladin 4" characters, 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 place the picture file in the same directory as the JSON file (whichever is the most important 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 is as follows:

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

Where linkdistance is the distance between nodes, charge is the definition of whether the node is attracted (value is positive) or mutually exclusive (value is negative), 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;});

Where 第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 is completely transparent, and 1 is completely opaque. This is 0, which 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: Displays the text on the connector you want to associate with this node when you move the mouse over the picture. This is just a Boolean assignment for D.show, which is used later in the update.

第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 doubt is "tree chart", I would like to solve this problem, but because I also have some problems not to understand, so first write this article this easier. 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
• More 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" mechanics diagram + Figure diagram