如何在d3.js中動畫和播放一段時間？

我是新手，同時在d3.js上工作。如何在d3.js中動畫和播放一段時間？

我想知道我們如何隨時間動畫的一些數據（如改變顏色）。

例如。比方說，在監控應用程序中，我正在通過美國地圖投影羣集數據。投影是通過繪製一個圓圈並根據其狀態填充紅色，綠色或黃色來完成的。

當我們開始監控，最好各界將充滿「綠色」的顏色，然後隨着時間的推移顏色可以取決於如何集羣行爲改變爲「黃色」或「紅色」。

所以，如果我需要在一定的時間窗口隨着時間玩這些顏色的變化，怎麼能做到呢？

如果你能指點我的任何類似的例子，那也會有幫助嗎？

感謝

來源

2012-09-25 SagarL

看看http://mbostock.github.com/d3/tutorial/bar-2.html。基本上你需要一個redraw函數，當你想更新圖表時你會打電話。（注意：這個函數的名字沒有什麼特別之處，你可以任意調用它。）

你可以使用setInterval創建一個基本的定時器，這是你的圖表將被更新的速率。

setInterval(function() { 
    redraw(); // call the function you created to update the chart 
}, 1500);

然後您定義redraw來更新圖表數據。這是一個條形圖的重繪功能，但你的是相似的。您只需根據數據調整顏色，而不是調整y位置和高度。

function redraw() { 
    // Update… 
    chart.selectAll("rect") 
     .data(data) 
    .transition() 
     .duration(1000) 
     .attr("y", function(d) { return h - y(d.value) - .5; }) 
     .attr("height", function(d) { return y(d.value); }); 
}

注意，這是一個簡化版本，我建議你閱讀我上面鏈接了一個更完整的示例頁面。

來源

2012-09-26 00:08:49 Bill

如何在d3.js中動畫和播放一段時間？

回答

相關問題