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>