D3.js make a point drawing with a circle (a) __js

what is SVG.

how to draw a circle on SVG.

How to draw a line on SVG.

what are the basic attributes of the attempt?

These questions will be answered by this article.

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

SVG

SVG, Scalable vector graphs, we later draw the data display diagram mostly in the SVG this large container to complete, it is equivalent to the canvas. Creating SVG is a good way to export and save a drawn graphic.

The simple SVG label format <svg width= "height=" ></svg>, and many visible elements can be embedded in the SVG tab, including Rect, Circle, ellipse, line, text, and path.

Below, we create a JS tag in the body, create an SVG object inside, the code is as follows:

<span style= "FONT-SIZE:14PX;" >var w = m;
var h =;
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 the SVG, first introduce the basic properties of the next circle: CX Center x coordinate CY Center y coordinate R radius

Next, draw five rounded circles that are enlarged in turn and place their centers on the same y-axis with the following code

<span style= "FONT-SIZE:14PX;" > var dataset = [5, M, n];
 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 denotes the introduction of data in the subscript of the array, such as: d=5,i=0 return
        (i *) +;
    })
    . attr ("Cy", H/2)//Place the center of the Centre in the middle of the svg height
    . attr ("R", function (d) {//RADIUS return
        D;
    }) </span>

Set the properties of each circle immediately

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

At this point, the circle on the SVG has been drawn to see the following figure

Draw Line

To draw a line in SVG, first define its two endpoints, start and end points (x1,y1), and (X2,y2)

The basic properties of a line include:

The X1 property defines the start of a line in the X-axis Y1 property defines the start of a line in the Y-axis X2 property defines the end of a line in the X-axis Y2 property defines the end of a line in the y-axis

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

The display effect chart is as follows:

Introduction to the use of an attempt

A little wired, then the connection points with the line, and then set the point of the charge between the repulsion force, so that the point of no relevance to maintain distance, then the embryonic form of the attempt to shape.

The Mechanics diagram (Force), also has the translation to do the Force guide diagram and so on. This diagram is interesting, starting with the initial data and looking at 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, "ta Rget ": 0," value ": 8}, {" Source ": 3," target ": 0," value ": ten}, {" Source ": 3," target ": 2," Value ": 6}, {" Source ": 4," target ": 0," value ": 1}, {" Source ": 5," target ": 0," value ": 1}, {" Source ": 6," target ": 0," value ": 1}, {" Source ": 7," target ": 0," Value ": 1}, {" Source ": 8," target ": 0," value ": 2}, {" Source ": 9," target ": 0," value ": 1}, {" Source ": one," target ": 1," Valu E ": 1}, {" Source ": one," target ": 3," Value ": 3}, {" Source ": one," target ": 2," Value ": 3}, {" Source ": one," target ": 0," value " : 5}, {' source ': ' Target ': 2, ' Value ': 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": 17 , "Value": 3}, {"source": "Target": 3}, {"source": "Target":, "Value": 3}, {"source": "Target": 2 0, "Value": 5}]}

The data consists of two parts, dots (nodes) and edges (links), and the values of source and target represent the elements corresponding to the numeric subscript of the nodes array.

Note that, regardless of the number of attributes of the nodes element, source and target temporarily point to a person's name, such as Source 1 target0 representing Napoleon and Myriel connections

A careful look will find that these points are only the attributes of some people, rely on these are not know where each point should be painted.

So you need to know some of the D3 drawing attempts to some of the proprietary methods. Here is a list of some of the necessary methods and explanations:

To facilitate the use of the above JSON data, assign values to the dataset, put in JS

(later these data will be saved in the corresponding format of the file, by D3 loading, loading methods in the D3 overall display has been slightly introduced)

var force = D3.layout.force ()  //transform the data by converting the point 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 and height
. Start ();                      Start conversion

The above code is to use the most basic method of layout.

These basic layouts don't meet all the data sets, and we're going to add some layout custom methods on that basis.

For example, set the length of the connection between nodes, the mutual exclusion force size. The perfect code appears as follows:

var force = D3.layout.force ()
. Nodes (Dataset.nodes)
. Links (dataset.edges).
size ([w, H])
. Linkdistance ([50])//node connection length
. Charge ([ -100])//    repulsion Force
. Start ();

So far, trying to basically initialize the layout complete

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 to set the function at random, such as the same people set to the same color, important personnel line bold, and then create a circle for each node, easy to browse

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

And finally, we're going to do a little bit to 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;});
};

This way, each time, get the coordinates of the line and point, and update to the canvas. So where do these coordinates come from? is when layout initializes the incoming dot-line data,

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

Well, the simplest use of the attempt to do so, after the text will continue to explain how to set the icon for a point, how to achieve different groupings of group members clustering scaling, how to display member information, how to replace the circle with rectangular block placement properties Contact, etc., please look forward to.