【D3.V3.js数据可视化系列教程】（二十四）--力导向图
//(1)定义节点和联系对象数组
var dataset={
nodes:[//节点
{ name:"Adam"},
{ name:"Bob"},
{ name:"Carride"},
{ name:"Donovan"},
{ name:"Edward"},
{ name:"Felicity"},
{ name:"George"},
{ name:"Hannah"},
{ name:"Iris"},
{ name:"Jerry"}
],
edges:[//边
{ source:0,target:1,weight:1,color:1},
{ source:0,target:2,weight:3,color:4},
{ source:0,target:3,weight:4,color:6},
{ source:0,target:4,weight:6,color:65},
{ source:1,target:5,weight:3,color:76},
{ source:2,target:5,weight:8,color:879},
{ source:2,target:5,weight:7,color:989},
{ source:3,target:4,weight:9,color:643},
{ source:5,target:8,weight:1,color:54},
{ source:5,target:9,weight:3,color:54},
{ source:6,target:7,weight:4,color:45},
{ source:7,target:8,weight:0,color:43},
{ source:2,target:8,weight:8,color:243},
{ source:3,target:8,weight:1,color:43},
{ source:5,target:8,weight:5,color:13},
{ source:6,target:8,weight:3,color:351},
{ source:8,target:9,weight:4,color:1}
]
};
//(2)转化数据为适合生成力导向图的对象数组
var force=d3.layout.force()
.nodes(dataset.nodes)//加载节点数据
.links(dataset.edges)//加载边数据
.size([w,h])//设置有效空间的大小
.linkDistance(50)//连线的长度
.charge(-200)//负电荷量，相互排斥设置的负值越大越排斥
.start();//设置生效
var edges=svg.selectAll("line")
.data(dataset.edges)
.enter()
.append("line")
.style("stroke",function(d){// 设置线的颜色
return colors(d.color);
})
.style("stroke-width",function(d,i){//设置线的宽度
return d.weight;
});
var nodes=svg.selectAll("circle")
.data(dataset.nodes)
.enter()
.append("circle")
.attr("r",function(d){//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换
return Math.log(d.weight)*10;
})
.style("fill",function(d){
return colors(d.weight*d.weight*d.weight);
})
.call(force.drag);//可以拖动
//(5)打点更新，没有的话就显示不出来了
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;
});
})
先设置坐标再打点的失误效果
合理的力导向图（可拖动）
<!DOCTYPE html><html> <head><meta charset="utf-8"><title>testD3-22-force.html</title><script type="text/javascript" src="http://localhost:8080/spring/js/d3.v3.js"></script><style type="text/css"></style></head><body><script type="text/javascript">var h=300;var w=300;// 颜色函数var colors=d3.scale.category20()//创建序数比例尺和包括20中颜色的输出范围//(1)定义节点和联系对象数组var dataset={nodes:[//节点{ name:"Adam"},{ name:"Bob"},{ name:"Carride"},{ name:"Donovan"},{ name:"Edward"},{ name:"Felicity"},{ name:"George"},{ name:"Hannah"},{ name:"Iris"},{ name:"Jerry"} ],edges:[//边{ source:0,target:1,weight:1,color:1},{ source:0,target:2,weight:3,color:4},{ source:0,target:3,weight:4,color:6},{ source:0,target:4,weight:6,color:65},{ source:1,target:5,weight:3,color:76},{ source:2,target:5,weight:8,color:879},{ source:2,target:5,weight:7,color:989},{ source:3,target:4,weight:9,color:643},{ source:5,target:8,weight:1,color:54},{ source:5,target:9,weight:3,color:54}, { source:6,target:7,weight:4,color:45},{ source:7,target:8,weight:0,color:43},{ source:2,target:8,weight:8,color:243},{ source:3,target:8,weight:1,color:43},{ source:5,target:8,weight:5,color:13},{ source:6,target:8,weight:3,color:351},{ source:8,target:9,weight:4,color:1}]};//(2)转化数据为适合生成力导向图的对象数组var force=d3.layout.force().nodes(dataset.nodes)//加载节点数据.links(dataset.edges)//加载边数据.size([w,h])//设置有效空间的大小.linkDistance(50)//连线的长度.charge(-200)//负电荷量，相互排斥设置的负值越大越排斥.start();//设置生效var svg=d3.select("body").append("svg").attr("width",w).attr("height",h);//(3)创建作为连线的svg直线var edges=svg.selectAll("line").data(dataset.edges).enter().append("line").style("stroke",function(d){//设置线的颜色return colors(d.color);}).style("stroke-width",function(d,i){//设置线的宽度return d.weight;});//(4) 创建作为连线的svg圆形var nodes=svg.selectAll("circle").data(dataset.nodes).enter().append("circle").attr("r",function(d){//设置圆点的半径，圆点的度越大weight属性值越大，可以对其做一点数学变换return Math.log(d.weight)*10;}).style("fill",function(d){return colors(d.weight*d.weight*d.weight);}).call(force.drag);//可以拖动 //(5)打点更新，没有的话就显示不出来了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;});//(6)设置节点坐标，节点先生成再确定坐标的nodes.attr("cx",function(d){//节点有坐标属性return d.x;}).attr("cy",function(d){return d.y;});})</script></body></html>