參考饅頭華華：http://d3.decembercafe.org/pages/lessons/14.html 與 tengxing007 :http://blog.csdn.net/tengxing007/article/details/59712572
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>力導向圖</title>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var nodes = [ { name: "BeiJing" }, { name: "XiaMen" },
{ name: "XiAn" }, { name: "HangZhou" },
{ name: "ShangHai" }, { name: "QingDao" },
{ name: "NanJing" } ];
var links = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } ,
{ source : 0 , target: 3 } , { source : 1 , target: 4 } ,
{ source : 1 , target: 5 } , { source : 1 , target: 6 } ];
var width = 800;
var height = 600;
var svg = d3.select("body")
.append("svg")
.attr("width",width)
.attr("height",height);
console.log(d3.forceManyBody());
// 通過布局來轉換數據，然后進行繪制
var simulation = d3.forceSimulation(nodes)
.force("link", d3.forceLink(links).distance(100))
.force("charge",d3.forceManyBody())//創建多體力
.force("center",d3.forceCenter(width/2, height/2));
simulation
.nodes(nodes)//設置力模擬的節點
.on("tick", ticked);
simulation.force("link")//添加或移除力
.links(links);//設置連接數組
var color = d3.scaleOrdinal(d3.schemeCategory20);
// 繪制
var svg_links = svg.selectAll("line")
.data(links)
.enter()
.append("line")
.style("stroke","#ccc")
.style("stroke-width",3)
.call(d3.zoom()//創建縮放行為
.scaleExtent([-5, 2])//設置縮放范圍
);
var svg_nodes = svg.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
.attr("cx", function(d) { return d.x; })
.attr("cy", function(d) { return d.y; })
.attr("r", '20')
.attr("fill", function(d,i){
return color(i);
}).call(d3.drag().on("start", dragstarted)//d3.drag() 創建一個拖曳行為
.on("drag", dragged)
.on("end", dragended));
console.log(nodes);
//添加描述節點的文字
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;
});
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();//設置目標α
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
function ticked() {
svg_links.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>