javascript - D3.js - 一段时间后动画中断

Question

我尝试使用这个 Voronoi 图 ( http://bl.ocks.org/christophermanning/1734663 )，我想做的是为每个节点添加随机运动，以便在图表上获得恒定的运动印象。

为此，我添加了这段代码以在随机时刻更改随机节点的位置:

setInterval(function(){
vertices.forEach(function(d, i) {
    if (Math.random() < 0.05) {
      setTimeout(function() {
        angle = radius * (i+10);
        vertices[i].x = vertices[i].x * (1 + Math.random() / 20 * randomZ());
        vertices[i].y = vertices[i].y * (1 + Math.random() / 20 * randomZ());
      }, Math.random() * 1000);   
    }   
});

}, 1000);

function randomZ() {
  return (Math.random() > 0.5) ? 1 : -1;
};

代码工作正常，但几秒钟后，屏幕卡住并且不再移动(至少在 chrome 上)。我猜我正在同时进行许多计算。

有什么办法可以解决这个问题吗？

这里是 JSFiddle，可以看到它的实际效果:http://jsfiddle.net/7krkh/1/

Answer 1

您看到此行为的原因是您正在使用强制布局的 tick 事件来更新显示 - 您的循环仅修改数据。即使您没有显式调用 force.stop()，强制布局也会在一段时间后冷却并停止。此后不会再生成任何 tick 事件。这意味着，在您的情况下，尽管基础数据继续更改，但显示不会发生进一步更新。

简单的解决方法是在更改数据的循环(或setInterval)的每次迭代中再次启动强制布局:

setInterval(function(){
  // ...
  force.start();
}, 1000);

完整演示 here .