2014-06-14 65 views
0

後破動畫我試圖用這個Voronoi圖(http://bl.ocks.org/christophermanning/1734663)和我想要做的就是添加一個隨機移動每個節點有圖上運動的恆定的印象。D3.js - 一段時間

要做到這一點,我說的這段代碼在一個隨機時刻更改爲隨機節點的位置:

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; 
}; 

代碼幾秒鐘後,但做工精細,畫面凍結,並沒有什麼動作了(至少在鉻上)。我猜測我正在同時進行許多計算。

有什麼辦法解決這個問題嗎?

這裏是的jsfiddle看到它在行動:http://jsfiddle.net/7krkh/1/

回答

1

你看到這種現象的原因是,您所使用的動力佈局的tick事件來更新顯示 - 您僅環修改數據。即使你沒有明確地調用force.stop(),力佈局會在一段時間後冷卻並停止。之後不會再有tick事件發生。這意味着,就您而言,雖然底層數據會繼續發生更改,但不會進一步更新顯示。

最簡單的解決方法是簡單地在每次循環(或setInterval寧)再次啓動力佈局改變數據:

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

完成演示here