D3.js to make a point drawing with a circle (i.)

What is SVG?

How do I draw a circle on SVG?

How do I draw a line on SVG?

What are the basic attributes of an attempt?

These questions will be answered by this article.

In terms of code, we use the above page framework, the body inside the JS to replace the current JS can be.

Svg

SVG, scalable vectors, the data we draw later is mostly done in the large container of SVG, which is equivalent to the canvas. Creating SVG is a good way to export and save a drawing.

The simple SVG tag format <svg width= "height=" ></SVG> in SVG tags, you can embed many visible elements, including Rect, Circle, ellipse, line, text, and path.

Below, we create a JS tag in the body and create an SVG object inside it, with the following code:

<span style= "FONT-SIZE:14PX;" >var w = 500;var h = 500;var svg = d3.select ("Body"). Append ("  svg")  . attr ("width", W)          //Set width  . attr (" Height ", h);        Set Height </span>

Draw a circle

Add the circle element to SVG and first describe the basic properties of the next circle: CX Center x coordinate CY Center y coordinate R radius

Next, draw a circle with five radii in turn, and place their center point on the same y-axis, as shown in the code below

<span style= "FONT-SIZE:14PX;" > var dataset = [5, 10, 15, 20, 25]; var circles = Svg.selectall ("Circle").    data (DataSet).            Enter ()    . Append ("Circle");    Circles.attr ("CX", function (d, i) {////center coordinates are incremented from left to right, note: I indicates the subscript of the data being introduced in the array, such as: D=5,i=0        return (i * +) +;    })    . attr ("Cy", H/2)//center is placed in the middle of the svg height    . attr ("R", function (d) {//RADIUS        return D;    }) </span>

The properties of each circle are set immediately after

<span style= "FONT-SIZE:14PX;" >    . attr ("Fill", "yellow")         //fill each circle with yellow    . attr ("Stroke", "orange")       //To each round edge painted orange    . attr (" Stroke-width ", function (d) {//proportionally sets the thickness of the edge    return D/2;}); </span>

At this point, the circle on the SVG is drawn and finished.

Draw lines

To draw a line in SVG, first define its two endpoints, start and End (X1,y1) and (X2,y2)

The basic properties of a line include:

• The X1 property defines the beginning of the line in the x-axis
• The Y1 property defines the start of the line in the y-axis
• The X2 property defines the end of the line in the x-axis
• The Y2 property defines the end of the line in the y-axis

<span style= "FONT-SIZE:14PX;" >var line = svg.append (' line '). attr (' x1 ', +). attr (' y1 ', +). attr (' X2 ',            200)            . attr (' style ', ' Stroke:rgb (99,99,99); Stroke-width:2 ');//Stroke width </span>

shown below:

Introduction to the Force diagram

A bit wired, then there are associated points with the line connected, and then set the next point between the charge repulsion force, so that no associated points to maintain the distance, then the embryonic form of the attempt.

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:

{"Nodes": [{"Name": "Myriel", "Group": 3, "QQ": "635511111"}, {"Name": "Napoleon", "group": 1, "QQ": "635511112"}, {"Name ":" Mlle.baptistine "," group ": 1," QQ ":" 635511113 "}, {" Name ":" Mme.magloire "," group ": 1," QQ ":" 635511114 "}, {" Name ":" Countessdelo "," group ": 1," QQ ":" 635511115 "}, {" Name ":" Geborand "," group ": 1," QQ ":" 635511116 "}, {" Name ":" Champtercier "," group ": 1," QQ ":" 635511117 "}, {" Name ":" Cravatte "," group ": 1," QQ ":" 635512111 "}, {" Name ":" Count "," group ": 1," QQ ":" 635513111 "}, {" Name ":" OldMan "," group ": 1," QQ ":" 635514111 "}, {" Name ":" LaBarre "," group ": 2," QQ ":" 635515111 "}, {" Name " : "Valjean", "group": 2, "QQ": "635516111"}, {"Name": "Marguerite", "group": 3, "QQ": "635531111"}, {"Name": "Mme.der", " Group ": 2," QQ ":" 635511311 "}, {" Name ":" Isabeau "," group ": 2," QQ ":" 635511211 "}, {" Name ":" Gervais "," group ": 2," QQ ":" 635514111 "}, {" Name ":" Tholomyes "," Group ": 3," QQ ":" 635571111 "}, {" Name ":" Listolier "," Group ": 3," QQ ":" 635581111 "}, {" Name ":" Fameuil "," Group ": 3," QQ ":" 635511011 "}, {" NamE ":" Blacheville "," Group ": 3," QQ ":" 635211111 "}, {" name ":" Favourite "," group ": 3," QQ ":" 635510111 "}, {" Name ":" Dahlia ",    "Group": 3, "QQ": "635511121"}], "links": [{"Source": 1, "target": 0, "value": 1}, {"Source": 2, "target": 0, "value": 8}, {"Source": 3, "target": 0, "value": ten}, {"Source": 3, "target": 2, "Value": 6}, {"Source": 4, "target": 0, "value": 1}, {"Sourc E ": 5," target ": 0," value ": 1}, {" Source ": 6," target ": 0," value ": 1}, {" Source ": 7," target ": 0," value ": 1}, {" Source ": 8," ta Rget ": 0," value ": 2}, {" Source ": 9," target ": 0," value ": 1}, {" Source ": one," target ": 1," Value ": 1}, {" Source ": one," target ": 3, "Value": 3}, {"Source": one, "target": 2, "Value": 3}, {"Source": one, "target": 0, "Value": 5}, {"source": +, "target": 2, "va Lue ": 1}, {" source ": +," target ": 2," Value ": 1}, {" source ": +," target ": 2," Value ": 1}, {" source ":" Target ": 2," value ":    1}, {"source": +, "target": 3, "Value": 4}, {"source": +, "target": 3, "Value": 4}, {"source": "Target": 3, "Value": 4}, {"source": +, "target": 3, "VAlue ": 4}, {" source ": +," target ": 2," Value ": 4}, {" source ": +," target ": 3," Value ": 4}, {" source ": +," target ": 4," value "    : 3}, {"source": +, "target": 1, "Value": 3}, {"source": +, "target": 2, "Value": 3}, {"source": +, "target": 3, "Value": 4},    {"source": +, "target": +, "value": 3}, {"source": +, "target": +, "value": 3}, {"source": +, "target": +, "value": 3}, {"source": +, "target": +, "value": 3}, {"source": +, "target": $, "Value": 5}]}

The data consists of two parts, point (nodes) and edge (links), and the value of source and target represents the element that corresponds to the value subscript of the nodes array.

Note that regardless of how many attributes the nodes element has, both source and target temporarily point to the person's name, such as Source 1 Target0, which represents Napoleon and Myriel connections

By looking at it, you will find that these points are just the attributes of the people, and it is impossible to know where each point is drawn.

Therefore, we need to understand some of the D3 drawing attempt to some of the proprietary methods. Here are a list of the necessary methods and explanations:

In order to use the first JSON data, assigned to the dataset, put in JS

(This data will be saved in the corresponding format of the file, loaded by D3, loading method in the D3 overall show has been a little introduction)

var force = D3.layout.force ()  //method to convert the data to a coordinate format. Nodes (<span style= "FONT-SIZE:14PX;" >dataset.</span>nodes)          //Incoming point. Links (dataset.links)          //incoming edge. Size ([w, h])                  //Set graphics width height. Start ();                      Start conversion

The above code is the most basic layout method.

These basic layouts do not satisfy all data sets, and we will add some custom methods of layout on this basis.

For example, set the length of connections between nodes, the size of mutual exclusion force between nodes. The code after the refinement is displayed as follows:

var force = D3.layout.force (). nodes (Dataset.nodes). Links (dataset.edges). Size ([w, H]). Linkdistance ([50])// Node line length. charge ([ -100])//    repulsion force. Start ();

At this point, the basic initialization of the layout is done

Next Create the connection

var edges = Svg.selectall ("line"). Data (Dataset.edges). Enter (). Append ("line"). Style ("Stroke", "#ccc"). Style (" Stroke-width ", 1);

Here the line color and width can be written function arbitrary settings, such as the same kind of people set to the same color, important personnel wiring bold and so on

Then create a circle for each node for easy browsing

var nodes = Svg.selectall ("Circle"). Data (Dataset.nodes). Enter (). Append ("Circle"). attr ("R", "Ten"). Style ("Fill", function (d, i) {return colors (i);}). Call (Force.drag);    Increase the drag effect, pull the node

Finally, we'll take a little bit, draw the dotted line to the canvas.

Force.on ("tick", function () {edges.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;}); Nodes.attr ("CX", function (d) {return d.x;})     . attr ("Cy", function (d) {return d.y;});});

In this way, each time a dot, get the coordinates of the line and point, in the update to the canvas. So where did these coordinates come from? is when layout initializes the incoming point line data,

Simulate some coordinate information for them. You can enter a dataset in the browser console to view each point line coordinate information

Well, the simplest use of the effort to complete this, the text will continue on this basis to explain how to set the icon for a point, how to achieve different groups of group members cluster scaling, how to display member information, how to replace the circle with a rectangular block placement properties Contact, etc., please look forward to!

D3.js to make a point drawing with a circle (i.)