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

Question

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

如何加速整个过程,比如节点在动画过程中移动速度提高了2倍.然后时间将是50%(用于迭代的CPU时间应远小于10秒,但我如何减少动画时间).

我试过了:

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

有什么建议？谢谢.

Answer 1

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

您可能尝试实现的该线程的一个建议是force.tick()在单个requestAnimationFrame回调中多次调用,然后更新节点和链接位置,然后循环直到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})`);
}