varnodes=[
{ name:"虚拟助理APP",group:1},
{ name:"桥梁结构",group:1},
{ name:"钢桁梁",group:1},
{ name:"上弦杆",group:1},
{ name:"下弦杆",group:1},
{ name:"桥面系",group:1},
{ name:"支座",group:1},
{ name:"声屏障",group:1},
{ name:"螺栓",group:1},
{ name:"螺栓病害",group:1},
{ name:"折断",group:1},
{ name:"缺失",group:1},
{ name:"其他",group:1},
{ name:"螺栓养护",group:1},
{ name:"涂装",group:1},
{ name:"补拧",group:1},
{ name:"除锈",group:1},
{ name:"螺栓维修",group:1},
{ name:"更换",group:1},
{ name:"补拧",group:1},
{ name:"斜拉桥",group:1},
{ name:"悬索桥",group:1},
{ name:"系杆拱",group:1}
];varedges=[
{ source :0, target:1} ,
{ source :1, target:2} ,
{ source :2, target:3},
{ source :2, target:4},
{ source :2, target:5},
{ source :2, target:6},
{ source :2, target:7},
{ source :2, target:8},
{ source :8, target:9},
{ source :9, target:10},
{ source :9, target:11},
{ source :9, target:12},
{ source :8, target:13},
{ source :13, target:14},
{ source :13, target:15},
{ source :13, target:16},
{ source :8, target:17},
{ source :17, target:18},
{ source :17, target:19},
{ source :1, target:20} ,
{ source :1, target:21} ,
{ source :1, target:22}
];varwidth= 1000;varheight=1000;varsvg=d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);varforce=d3.layout.force()
.nodes(nodes)//指定节点数组
.links(edges)//指定连线数组
.size([width,height])//指定范围
.linkDistance(150)//指定连线长度
.charge(-400);//相互之间的作用力
force.start();//开始作用
console.log(nodes);
console.log(edges);//添加连线
varsvg_edges=svg.selectAll("line")
.data(edges)
.attr("class","links")
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);varcolor=d3.scale.category20();//添加节点
varsvg_nodes=svg.selectAll("circle")
.data(nodes)
.attr("class","nodes")
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){returncolor(i);
})
.call(force.drag);//使得节点能够拖动
//添加描述节点的文字
varsvg_texts=svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill","black")
.attr("dx",20)
.attr("dy",8)
.text(function(d){returnd.name;
});
force.on("tick",function(){//对于每一个时间间隔
//更新连线坐标
svg_edges.attr("x1",function(d){returnd.source.x; })
.attr("y1",function(d){returnd.source.y; })
.attr("x2",function(d){returnd.target.x; })
.attr("y2",function(d){returnd.target.y; });//更新节点坐标
svg_nodes.attr("cx",function(d){returnd.x; })
.attr("cy",function(d){returnd.y; });//更新文字坐标
svg_texts.attr("x",function(d){returnd.x; })
.attr("y",function(d){returnd.y; });
});