web

d3力学图(force layout)更新

Posted by Codeboy on December 16, 2015

d3是javascript的一个可视化库，可以制作很漂亮的表格等，其中有一个非常好玩的力学图，可以方便的进行拖拽等，但是关于更新的操作网上介绍的很少，下面介绍下关于力学图的更新，先看一个例子(http://example.codeboy.me/d3/force-layout.html，点击一次下图后可以直接按回车键添加)：

绘制图形的方式基本上可以分为svg与canvas两种，两者各有优缺点，不对于以后屏幕越来越大，svg更加的有优势，并且svg可以很方便的进行事件交互。

下面看一下这个力学图具体实现：

整体代码

  • <html>

  • <head>

  • <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  • 

  • <meta name="viewport" content="width=device-width, initial-scale=1">

  • <link href="css/bootstrap.min.css" rel="stylesheet">

  • <script src="js/jquery.min.js"></script>

  • <script src="js/bootstrap.min.js"></script>

  • <script src="js/layer/layer.min.js"></script>

  • <script src="js/d3.min.js" charset="utf-8"></script>

  • <title>d3 layout update</title>

  • </head>

  • <body style="height: 100%;">

  • <div class="container" style="padding-left: 0; width: 100%;">

  •     <div id="svg">

  •     </div>

  • </div>

  • 

  • <script>

  •     $(document).ready(function () {

  •         var height = document.body.clientHeight;

  •         var width = document.body.clientWidth;

  • 

  •         var nodes_data = [{'name': '0'},

  •             {'name': '1'},

  •             {'name': '2'},

  •             {'name': '3'},

  •             {'name': '4'},

  •             {'name': '5'},

  •             {'name': '6'}];

  •             

  •         var edges_data = [{'source': 0, 'target': 1},

  •             {'source': 0, 'target': 2},

  •             {'source': 0, 'target': 3},

  •             {'source': 0, 'target': 4},

  •             {'source': 0, 'target': 5},

  •             {'source': 0, 'target': 6}];

  • 

  •         var color = d3.scale.category20();

  •         var edgeWidth = 2;

  •         var r = 40;

  •         var svg = d3.select("#svg").append("svg")

  •                 .attr("width", width)

  •                 .attr("height", height);

  • 

  •         var force = d3.layout.force()

  •                 .nodes(nodes_data)

  •                 .links(edges_data)

  •                 .size([width, height])

  •                 .linkDistance(200)

  •                 .friction(0.8)

  •                 .charge(-500)

  •                 .start();

  • 

  •         //边

  •         var links = svg.selectAll("line")

  •                 .data(edges_data)

  •                 .enter()

  •                 .append("line")

  •                 .attr("marker-end", "url(#arrow)")

  •                 .style("stroke", "#ccc")

  •                 .style("stroke-width", edgeWidth);

  • 	//节点

  •         var nodes = svg.selectAll("circle")

  •                 .data(nodes_data)

  •                 .enter()

  •                 .append("circle")

  •                 .attr("r", r)

  •                 .style("fill", function (d, i) {

  •                     return color(i);

  •                 })

  •                 .on("click", function (d, i) {

  •                     if (i == 0) {

  •                         update();

  •                     }

  •                 })

  •                 .call(force.drag);

  • 	//标签

  •         var nodes_labels = svg.selectAll("text")

  •                 .data(nodes_data)

  •                 .enter()

  •                 .append("text")

  •                 .attr("dx", function (d, i) {

  •                     return -16 * (nodes_data[i].name.length);

  •                 })

  •                 .attr("dy", 5)

  •                 .attr("fill", "#fff")

  •                 .style("font-size", 16)

  •                 .text(function (d, i) {

  •                     if (i == 0) {

  •                         return "点我";

  •                     }

  •                     return "";

  •                 });

  • 

  • 	//运动刷新

  •         force.on("tick", function (d) {

  •             links.attr("x1", function (d) {

  •                 var distance = Math.sqrt((d.target.y - d.source.y) * (d.target.y - d.source.y) +

  •                         (d.target.x - d.source.x) * (d.target.x - d.source.x));

  •                 var x_distance = (d.target.x - d.source.x) / distance * r;

  •                 return d.source.x + x_distance;

  •             }).attr("y1", function (d) {

  •                 var distance = Math.sqrt((d.target.y - d.source.y) * (d.target.y - d.source.y) +

  •                         (d.target.x - d.source.x) * (d.target.x - d.source.x));

  •                 var y_distance = (d.target.y - d.source.y) / distance * r;

  •                 return d.source.y + y_distance;

  •             }).attr("x2", function (d) {

  •                 var distance = Math.sqrt((d.target.y - d.source.y) * (d.target.y - d.source.y) +

  •                         (d.target.x - d.source.x) * (d.target.x - d.source.x));

  •                 var x_distance = (d.target.x - d.source.x) / distance * r;

  •                 return d.target.x - x_distance;

  •             }).attr("y2", function (d) {

  •                 var distance = Math.sqrt((d.target.y - d.source.y) * (d.target.y - d.source.y) +

  •                         (d.target.x - d.source.x) * (d.target.x - d.source.x));

  •                 var y_distance = (d.target.y - d.source.y) / distance * r;

  •                 return d.target.y - y_distance;

  •             });

  • 

  • 

  •             nodes.attr("cx", function (d) {

  •                 return d.x;

  •             }).attr("cy", function (d) {

  •                 return d.y;

  •             });

  • 

  •             nodes_labels.attr("x", function (d) {

  •                 return d.x;

  •             });

  •             nodes_labels.attr("y", function (d) {

  •                 return d.y;

  •             });

  • 

  • 

  •         });

  • 

  • 	//用于产生不同颜色的节点

  •         var colorIndex = 8;

  • 

  •         //添加节点更新

  •         function update() {

  •             nodes_data.push({'name': 'xxx'});

  •             edges_data.push({'source': 0, 'target': nodes_data.length - 1});

  • 

  •             links = links.data(force.links());

  • 

  •             links.enter()

  •                     .append("line")

  •                     .style("stroke", "#ccc")

  •                     .style("stroke-width", 2);

  • 

  •             links.exit().remove();

  • 

  •             nodes = nodes.data(force.nodes());

  •             nodes.enter().append("circle")

  •                     .attr("r", 40)

  •                     .style("fill", color(colorIndex++))

  •                     .call(force.drag);

  • 

  •             nodes.exit().remove();

  • 

  •             force.start();

  •         }

  • 

  •         //回车事件

  •         $(document).keydown(function(e) {

  •             if(e.which == 13) {

  •                update();

  •             }

  •         });

  •     });

  • 

  • </script>

  • 

  • </body>

  • </html>

更新讲解

更新部分只有 update()函数，更新的操作分为以下

  1. 数据更新
  2. 力学图重新加载数据
  3. 追加对应的边与节点(enter)
  4. 去除无用的元素(remove)
  5. 执行 force.start() 操作

只要按照顺序进行，新增的节点等就可以很好的添加。

例子说明

例子中有几点需要说明一下

  1. force.on("tick", function (d){...}) 中的计算用户绘制线条的时候只绘制两个圆之间的部分，当然这么做也便于添加箭头，也能较少一些其他的重叠操作。

  2. var nodes_labels = svg.selectAll("text")中仅仅对第一个点进行了标注，用于提示点击操作，也可以对所有的点进行标注的。

总结

d3的github(https://github.com/mbostock/d3/wiki/Gallery)上有很多的例子，大家可以找到自己喜欢的进行学习，同时也需要对svg有一定的学习，方便我们自己进行一些改进。

如有任何知识产权、版权问题或理论错误，还请指正。

转载请注明原作者及以上信息。

d3力学图(force layout)更新