如何加快d3.js中的强制布局动画 [英] How to speed up the force layout animation in d3.js

问题描述

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

I am using D3.js for rendering about 500 nodes and links among them. It usually needs 10 seconds for the layout to settle down (the iteration to converge).

如何加快整个过程，例如，节点在动画期间移动速度快两倍。那么时间将是50％（用于迭代的CPU时间应该远小于10秒，但是如何减少动画时间）。

How do I speed up the whole process,say, the nodes are moving 2x faster during animation. then the time will be 50% (The CPU time that used for the iteration should be much less than 10 seconds, but how can I reduce the animation time).

I已尝试：

1. 在某个时间手动管理tick（）在for循环中，例如100次，它更快，动画将被隐藏，这是一个巨大的损失。


2. 增加链接强度将有所帮助，节点将在动画过程中移动得更快。但是布局很敏感，任何小的拖动可能会导致许多节点移动。

有任何建议吗？感谢。

推荐答案

查看

Check out this thread which has a lot of good info relating to this topic.

您可以尝试使用该主题的一个建议： this thread 实现是在单个 requestAnimationFrame 回调中调用 force.tick（）多次，然后更新节点和链接位置，然后循环，直到 force.alpha 达到0（或任何你想要的alpha阈值）。尝试这样：

One suggestion from that thread that you might try to implement is to call force.tick() several times within a single requestAnimationFrame callback, then update the node and link positions, and then loop until force.alpha reaches 0 (or whatever you want your alpha threshold to be). Try something like this:

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 值。

That would render once for every 3 ticks, or 3x speed. Adjust the ticksPerRender value as needed.

此处 是一个简单的演示。在这种情况下，我使用 force.on（'start'，callback）来调用上面描述的渲染逻辑。这意味着，当开始拖动操作时，它会自动被再次调用。

HERE is a simple demo. In this case, I've used the force.on('start', callback) to call the rendering logic described above. This means it will automatically be called again when beginning a drag interaction.

这篇关于如何加快d3.js中的强制布局动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！