如何加速d3.js中的力布局动画

Question

我使用D3.js渲染大约500个节点和它们之间的链接。 通常需要10秒才能使布局稳定下来（迭代收敛）。

如何加速整个过程，比如节点在动画过程中移动速度提高了2倍。 那么时间将是50％（用于迭代的CPU时间应该远小于10秒，但我怎样才能减少动画时间）。

我试过了：

1. 手动管理for循环中的tick（）一定时间，比如100次，它更快，但动画将隐藏在用户之外，这是一个很大的损失。
2. 增加链接强度将有所帮助，节点在动画期间将移动得更快。 但布局非常敏感，任何小的拖动都可能导致许多节点移动。

有什么建议？ 谢谢。

Answer 1

查看此主题 ，其中包含许多与此主题相关的良好信息。

您可能尝试实现的该线程的一个建议是在单个requestAnimationFrame回调中多次调用force.tick() ，然后更新节点和链接位置，然后循环直到force.alpha达到0（或者您想要的任何内容） alpha阈值为）。 尝试这样的事情：

var ticksPerRender = 3;

requestAnimationFrame(function render() {

  for (var i = 0; i < ticksPerRender; i++) {
    force.tick();
  }

  // UPDATE NODE AND LINK POSITIONS HERE

  if (force.alpha() > 0) {
    requestAnimationFrame(render);
  }
});

这将为每3个刻度或3倍速度渲染一次。 根据需要调整ticksPerRender值。

这是一个简单的演示。 在这种情况下，我使用force.on('start', callback)来调用上面描述的渲染逻辑。 这意味着在开始拖动交互时会自动再次调用它。

Answer 2

在ticked事件处理程序中注入一个调用/调用可能会更好，requestAnimationFrame方法会在触摸板环境的MacBook上引起一个奇怪的错误。

function ticked() {
  for (let i = 0; i < 5; i++) {
    force.tick();
  }

  link.attr('x1', (d) => d.source.x)
      .attr('y1', (d) => d.source.y)
      .attr('x2', (d) => d.target.x)
      .attr('y2', (d) => d.target.y);

  node.attr('transform', (d) => `translate(${d.x}, ${d.y})`);
}