<html>
<head>
<meta charset="utf-8">
<title>力导向图</title>
<style>
.links line {
stroke: #999;
stroke-opacity: 0.6;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
var nodes = [
{ 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 }
];
var edges = [
{ 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 }
];
var width = 1000;
var height =1000;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
var force = d3.layout.force()
.nodes(nodes) //指定节点数组
.links(edges) //指定连线数组
.size([width,height]) //指定范围
.linkDistance(150) //指定连线长度
.charge(-400); //相互之间的作用力
force.start(); //开始作用
console.log(nodes);
console.log(edges);
//添加连线
var svg_edges = svg.selectAll("line")
.data(edges)
.attr("class", "links")
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",1);
var color = d3.scale.category20();
//添加节点
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.attr("class", "nodes")
.enter()
.append("circle")
.attr("r",20)
.style("fill",function(d,i){
return color(i);
})
.call(force.drag); //使得节点能够拖动
//添加描述节点的文字
var svg_texts = svg.selectAll("text")
.data(nodes)
.enter()
.append("text")
.style("fill", "black")
.attr("dx", 20)
.attr("dy", 8)
.text(function(d){
return d.name;
});
force.on("tick", function(){ //对于每一个时间间隔
//更新连线坐标
svg_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; });
//更新节点坐标
svg_nodes.attr("cx",function(d){ return d.x; })
.attr("cy",function(d){ return d.y; });
//更新文字坐标
svg_texts.attr("x", function(d){ return d.x; })
.attr("y", function(d){ return d.y; });
});
</script>
</body>
</html>