【d3.js教程06】force 力導向圖 · D3.js征途

![](https://box.kancloud.cn/2016-04-19_5716100515c19.jpg) ~~~ <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .good{ font-size: 10px; } </style> <script src="js/d3.min.js" type="text/javascript" charset="utf-8"></script> <script src="js/jquery-1.11.3.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <svg></svg> <script type="text/javascript"> var width=500; var height= 500; var svg = d3.select("svg"); svg.attr("x",300) .attr("y",300) .attr("width",1000) .attr("height",1000); var nodes = [ { name: "桂林" }, { name: "廣州" }, { name: "廈門" }, { name: "杭州" }, { name: "上海" }, { name: "青島" }, { name: "天津" } ]; var edges = [ { source : 0 , target: 1 } , { source : 0 , target: 2 } , //試了下，source和target不能換名字的 { source : 0 , target: 3 } , { source : 1 , target: 4 } , { source : 1 , target: 5 } , { source : 1 , target: 6 } ]; /*初始化force*/ var force = d3.layout.force() .nodes(nodes) .links(edges) .size([300,300]) //作用力的中心區域 .linkDistance(100) //連線的長度 .charge([-100]); //負數為排斥正數為吸引 /*很關鍵啟動force*/ force.start(); /*添加連線*/ var svg_edges = svg.selectAll("line") .data(edges) .enter() .append("line") .attr("dx",function(d,i){ return i*20; }) .attr("dy",function(d,i){ return i*30; }) .style("stroke","#ccc") //線條的顏色 .style("stroke-width",1);//線條的寬度 /*顏色*/ var color = d3.scale.category20(); /*添加節點*/ var svg_nodes = svg.selectAll("circle") .data(nodes) .enter() .append("circle") .attr("cx",function(d,i){ return i*20; }) .attr("cy",function(d,i){ return i*30; }) .attr("r",20) .style("fill",function(d,i){ return color(i); }) .call(force.drag); //調用drag函數使節點能被拖動 /*添加描述節點的文字*/ var svg_texts = svg.selectAll("text") .data(nodes) .enter() .append("text") .attr("class","good") .style("fill","black") .attr("dx",-10) //文字相對node中心的移動 .attr("dy",10) .text(function(d,i){ //返回節點的名字 return d.name; }) .style("fill","white"); force.on("tick", function(){ //對于每一個時間間隔將之前通過force活著 //更新連線坐標 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> ~~~