[D3.js advanced series-2.0] mechanics diagram + relationship diagram, d3.js advanced

[D3.js advanced series-2.0] mechanics diagram + relationship diagram, d3.js advanced

It is interesting to combine a mechanical diagram (force-directed diagram) with a diagram of common characters in life. This article explains how to insert external images and text in a graph.

In Chapter 9.2, a simple mechanical diagram is created. Many of my friends have questions, including:

• How to insert text next to a ball
• How to replace a ball with other images
• How to insert Images
• How to limit the boundary of ball movement

This article will explain the above issues in sequence. The first three points are SVG elements, which are not closely related to D3.

1. SVG Images

For more information about SVG image elements, see [official documentation-image ]. Generally, we only need to use the five attributes of the image element.

<image xlink:href="image.png" x="200" y="200" width="100" height="100"></image>

Where:

• Xlink: href-image name or URL
• X-coordinates of the image
• Y-the y coordinate of the image
• Width-Image width
• Height-Image height

Insert an image in D3. The Code is as follows:

svg.selectAll("image").data(dataset).enter().append("image").attr("x",200).attr("y",200).attr("width",100).attr("height",100).attr("xlink:href","image.png");

2. SVG text

The text elements of SVG are similar to those of images. For details, see [official documentation-text ].

<text x="250" y="150" dx="10" dy="10" font-family="Verdana" font-size="55" fill="blue" >Hello</text>

Where:

• X-text x coordinate
• Y-text y coordinate
• Dx-x-axis Text Translation
• Text Translation in the dy-y axis direction
• Font-family-font
• Font-size-font size
• Fill-font color

Insert text in D3, and the code is like:

svg.selectAll("text").data(dataset).enter().append("text").attr("x",250).attr("y",150).attr("dx",10).attr("dy",10).text("Hello");

3. Source File

Next, create the source file of the mechanics diagram, and write the data into the JSON file this time.

Haha, I am also a fan of xianjian by referring to the character "xianjian 4". I look forward to the listing of xianjian 6 in July.

{"Nodes": [{"name": "yuntianhe", "image": "tianhe.png" },{ "name": "Han lingsha", "image ": "lingsha.png" },{ "name": "", "image": "mengli.png" },{ "name": "Murong Ziying", "image ": "ziying.png"}], "edges": [{"source": 0, "target": 1, "relation": "friends" },{ "source": 0, "target": 2, "relation": "friends" },{ "source": 0, "target": 3, "relation": "friends"}]}

As shown above, add data to the JSON file, and then place the image file and the JSON file in the same directory (whatever you want, most importantly, how the program is implemented ).

4. Mechanics 4.1 read files

Reading JSON files should be familiar with this. Otherwise, take a look at Chapter 9.4 ].

d3.json("relation.json",function(error,root){if( error ){return console.log(error);}console.log(root);}

4.2 define the layout of a mechanical Diagram

The Layout (Layout) of the mechanics diagram is as follows:

var force = d3.layout.force().nodes(root.nodes).links(root.edges).size([width,height]).linkDistance(200).charge(-1500).start();

Specifically, linkDistance is the distance between nodes. charge defines whether the two nodes are attractive (with a positive value) or mutually exclusive (with a negative value). The stronger the value.

4.3 draw connection lines

The code for creating a connection line 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;});

Lines 1st-6: draw a straight line

Lines 8th-15: Draw text in a straight line

The text style on a straight line is:

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

Fill-opacity indicates transparency. 0 indicates transparency, and 1 indicates transparency. It is 0, indicating that it is not displayed in the initial state.

4.4 draw nodes

Draw the image 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;});

Lines 1st-16: Drawing Images

Lines 10th-15: When you move the cursor over the image, the text on the connection line associated with the node is displayed. Here, only a Boolean value is assigned to d. show. This value will be used in subsequent updates.

Lines 21st-30: Draw text below the image

4.5 update

Keep the mechanics diagram updated. The force. on ("tick", function () {}) is used to call the function for each update.

Force. on ("tick", function () {// limit the node's 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 position of the connection line 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.tar get. x;}); edges_line.attr ("y2", function (d) {return d.tar get. y ;}); // update the text location edges_text.attr ("x", function (d) {return (d. source. x + d.tar get. x)/2;}); edges_text.attr ("y", function (d) {r Eturn (d. source. y + d.tar get. y)/2;}); // whether to draw the text edges_text.style ("fill-opacity", function (d) {return d. source. show | d.tar get. show? 1.0: 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 result is as follows:

You can click the address below, right click the browser to view the complete code: http://www.ourd3js.com/demo/J-2.0/relationforce.html

6. Conclusion

In the [Getting Started series], the most frequently asked question is [tree chart]. I wanted to solve this problem first, but I still haven't figured it out because of some problems, therefore, it is easier to write this article first. Next, we will have several mechanical graphs. The arrangement of tree charts will take some time.

Thank you for reading.

Document Information

• Copyright Disclaimer: BY-non-commercial (NC)-deduction prohibited (ND)
• Published on: February 1, October 25, 2014
• More content: OUR D3.JS-data visualization special site and CSDN personal blog
• Note: Please indicate the source for reprinting. Thank you.

How can d3js draw a mechanical diagram within the border?

When using layout of a mechanical diagram, set the following range:
D3.layout. force ()
. Nodes (nodes)
. Links (edges)
. Size ([width, height])
. Start ();
The preceding size can specify a range.
For details, see www.ourd3js.com/wordpress /? P = 196
Thank you.

Using the sample data to draw the X-R Control Chart, calculated X = 655, R = 20, look up the table A2 = 0577, D4 = 2115, D3 is negative

123