1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>力向導圖</title> 6 <style type="text/css"> 7 .good { 8 font-size: 10px; 9 } 10 11 svg { 12 display: block; 13 width: 800px; 14 height: 800px; 15 margin: 100px auto; 16 } 17 </style> 18 <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> 19 </head> 20 <body> 21 <svg></svg> 22 23 <script type="text/javascript"> 24 var nodes = [{name: "桂林"}, {name: "廣州"}, 25 {name: "廈門"}, {name: "杭州"}, 26 {name: "上海"}, {name: "青島"}, 27 {name: "天津"}]; 28 29 var edges = [ 30 {source: 0, target: 1}, {source: 0, target: 2}, 31 {source: 0, target: 3}, {source: 0, target: 4}, 32 {source: 0, target: 5}, {source:0, target: 6}]; 33 var force = d3.layout.force() 34 .nodes(nodes) //指定節點數組 35 .links(edges) //指定連線數組 36 .size(['800', '600']) //指定作用域范圍 37 .linkDistance(150) //指定連線長度 38 .charge([-400]); //相互之間的作用力 39 force.start()//開始作用； 40 console.log(nodes)//轉換后的數據 41 console.log(edges)//轉換后的數據 42 var svg = d3.select('svg') 43 // 繪制連接線 44 var svg_edges = svg.selectAll('line') 45 .data(edges) 46 .enter() 47 .append('line') 48 .style('stroke', '#ccc') 49 .style('stroke-width', 1) 50 var color = d3.scale.category20() 51 // 添加節點 52 var svg_nodes = svg.selectAll('circle') 53 .data(nodes) 54 .enter() 55 .append('circle') 56 .attr('r', 20) 57 .style('fill', function (d, i) { 58 return color(i) 59 }) 60 .call(force.drag) 61 //添加描述文字 62 var svg_texts = svg.selectAll('text') 63 .data(nodes) 64 .enter() 65 .append('text') 66 .style('fill', 'black') 67 .attr('dx', 20) 68 .attr('dy', 8) 69 .text(function (d) { 70 return d.name 71 }) 72 // 力想到圖是不斷運動的，每一時刻都在發生更新，因此必須不斷更新節點和連線的位置 73 // force里面的tick時間，每進行到一個時刻都要調用它，監聽事件寫在這里面就好 74 force.on('tick', function () { 75 // 更新連線坐標 76 svg_edges.attr("x1", function (d) { 77 return d.source.x; 78 }) 79 .attr("y1", function (d) { 80 return d.source.y; 81 }) 82 .attr("x2", function (d) { 83 return d.target.x; 84 }) 85 .attr("y2", function (d) { 86 return d.target.y; 87 }); 88 89 // 更新節點坐標 90 svg_nodes.attr("cx", function (d) { 91 return d.x; 92 }) 93 .attr("cy", function (d) { 94 return d.y; 95 }); 96 // 更新文字坐標 97 svg_texts.attr("x", function (d) { 98 return d.x; 99 }) 100 .attr("y", function (d) { 101 return d.y; 102 }); 103 }) 104 </script> 105 </body> 106 </html>