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。

D3.js - 动画在一段时间后破裂

1 个答案: