D3.js力导向图渲染数据

Question

我的d3.js力导向图如何解决数据在首次渲染时，所有节点剧烈抖动，为什么抖动，（特别剧烈！！！）

 

Answer 1

force.on("tick", function () {
 
    if(force.alpha()<=0.05){  // 足够稳定时，才渲染一次
 
      link.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; });
      node.attr("cx", function (d) { return d.x; })
          .attr("cy", function (d) { return d.y; });
 
      force.stop(); // 渲染完成后立即停止刷新
    }
});

阅读了一下官方文档 ，发现问题出来 tick 上。

force.start() 后，有一个计时器不停地触发 tick 直到所有节点最终受力平衡稳定下来。

可以理解为，有个计时器不停在打点，每打一次点需要触发一次 tick() 里的动作。而 tick() 的默认动作是重绘所有节点和连线位置。因为图形渲染需要时间长，渲染的次数又多，所以需要等很长时间，且会抖动，你将源码进行如上的修改，应该就能解决这个问题。