d3.js——绘制力学图

绘制力学图总结为如下步骤：

一、确定数据源：

        绘制力学图，你需要知道定点和边，如下：

var nodes = [
    {name:"GuiLin"},
    {name:"GuangZhou"},
    {name:"XiaMen"},
    {name:"HangZhou"},
    {name:"ShangHai"},
    {name:"QingDao"},
    {name:"TianJin"},
    {name:"BeiJing"},
    {name:"ChangChun"},
    {name:"XiAn"},
    {name:"WuLuMuQi"},
    {name:"LaSa"},
    {name:"ChengDu"}];
var edges = [
    {source:0,target: 1 },
    {source:1,target: 2 },
    {source:3,target: 4 } ,
    {source:4,target: 5 } ,
    {source:5,target: 6 } ,
    {source:6,target: 7 } ,
    {source:7,target: 8 } ,
    {source:8,target: 9 } ,
    {source:9,target:10 } ,
    {source:10,target:11} ,
    {source:11,target:12} ,
    {source:12,target: 0} ];

二、使用d3.layout.force()函数进行数据的转换：

var force = d3.layout.force()
    .nodes(nodes)//传入定点的数组
    .links(edges) //传入边的数组
    .size([width,height]) //作用域的大小
    .linkDistance(200) //两个定点之间的长度
    .charge([-100]) //设定弹力的大小
    .alpha(0)
    .start(); //开始进行转换

转换后的每一个object格式就呈现如下了：

三、进行简单的点、线的绘制，这里的点我们使用圆形：

//画线
var svg_edges = svg.selectAll("line")
.data(edges)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);

var color = d3.scale.category20();
//画点
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("r",10)
.style("fill",function(d,i){
    return color(i);
})
.call(force.drag);

注意：这里我们调用了call（force.drag）函数，是将定点设定为可拖动状态。这个call函数就是将当前选择的函数传到force.drag函数中去。

四、最后一步就是进行运动刷新：

force.on("tick", function () {
    svg_edges.attr("x1",function(d){return d.source.x;});
    svg_edges.attr("y1", function (d){return d.source.y;});
    svg_edges.attr("x2",function(d){return d.target.x;});
    svg_edges.attr("y2",function(d){return d.target.y});

    svg_nodes.attr("cx",function(d){return d.x;});
    svg_nodes.attr("cy",function(d){return d.y});
});

注意：tick指的是时间间隔，也就是每一个时间间隔之后就刷新一遍画面，刷新的内容写在后面的无名函数function中，function中写上作图的内容

静态结果如下：