d3实现的力向导图 

  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>

 

posted @ 2019-01-23 15:17  前端极客  阅读(1371)  评论(0)  编辑  收藏  举报