D3實時streamgraph（圖表數據可視化）

我想流圖如本例： http://mbostock.github.com/d3/ex/stream.html D3實時streamgraph（圖表數據可視化）

enter image description here

，但我想從右側進入實時數據，並有舊數據從左邊離開，這樣我總是有一個200個樣本的窗口。我如何做到這一點，以便我有適當的過渡？

我試圖在陣列中的改變數據點，然後重新創建一個區域爲這樣

data0 = d3.layout.stack()(a);

，但我的轉變不會使它看起來像的圖表在屏幕上滑動。

在此先感謝。

來源

2012-03-12 klyngbaek

嘗試this tutorial：

在實施時間序列數據的實時顯示，我們經常使用的x軸編碼時間的位置是：隨着時間的推移，新的數據從右邊，老進來數據向左滑出。如果使用D3內置的path interpolators，但是，你可能會看到一些奇怪的行爲...

爲了消除擺動，插值變換，而不是路徑。如果您將圖表視爲可視化函數 - 它的價值沒有變化，我們只是展示了該領域的不同部分，這是有道理的。通過在新的數據到達相同的速率滑動可見的窗口，我們可以無縫地顯示實時數據...

來源

2012-03-12 12:31:00 mbostock

謝謝！我瀏覽了該教程，但我試圖將其推斷到流圖示例時遇到了很多麻煩。我終於用這行代碼來移動我的多個路徑。（「path」）。data（data0）.attr（「d」，area）.attr（「transform」，null）.transition（）。duration（50）.ease（「linear」）。 attr（「transform」，「translate（」+ -10 +「）」）。我只能在第一個路徑上遞歸地調用轉換，否則整個圖轉換一次每個路徑，然後我有一個回調爆炸。有一個更好的方法嗎？謝謝！ – klyngbaek 2012-03-13 07:09:13

我已經在這裏發佈我的示例： http://lyngbaek.com/real-time-stream-graph.html 每隔一段時間底部'路徑'與'頂部'路徑錯位，可能是因爲我做我的遞歸transition（）調用。我從你的教程中推斷出來，併爲頂部和底部路徑創建了一個單獨的數據數組。然後我個人向他們中的每一個都推出一個新的價值。然後我必須重新計算一個新的d3.layout.stack（）並重新繪製它。然後我轉移我的2個數據數組並重復。這是正確的方法，還是有更乾淨的方法來做到這一點。再次感謝！ – klyngbaek 2012-03-13 07:22:43

這是我在尋找與我的問題在這裏最： http：// stackoverflow。com/questions/12764813 /生產活動圖與D3 你如何建議從服務器獲取數據到客戶端？ – 2012-10-06 23:49:21

下面是一個簡單的例子： http://jsfiddle.net/cqDA9/1/ 它顯示了一個可能的解決方案來跟蹤和更新不同數據系列。

var update = function() { 
    for (Name in chart.chartSeries) { 
     chart.chartSeries[Name] = Math.random() * 10; 
    } 
    for (Name in chart2.chartSeries) { 
     chart2.chartSeries[Name] = Math.random() * 10; 
    } 
    setTimeout(update, 1000); 
} 
setTimeout(update, 1000);

來源

2013-12-07 01:09:40 Jerm

D3實時streamgraph（圖表數據可視化）

回答

相關問題