javascript - 如何在 d3.js 中加速力布局动画

Question

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

如何加快整个过程，例如，节点在动画期间移动速度快 2 倍。则时间将是 50%(用于迭代的 CPU 时间应该远少于 10 秒，但如何减少动画时间)。

我试过:

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

有什么建议吗？谢谢。

Answer 1

查看 this thread其中有很多与此主题相关的有用信息。

您可能会尝试实现该线程的一个建议是在单个 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 值。

HERE是一个简单的演示。在本例中，我使用了 force.on('start', callback) 来调用上述呈现逻辑。这意味着它会在开始拖动交互时自动再次调用。