D3.js掃描圖

我正在用d3.js構建一個動態線圖，顯示固定的時間段和相關的數據值（高數據分辨率），並不斷用最新的數據集更新。D3.js掃描圖

有很多示例使用push/pop和translate機制來獲取滾動查看區域的線條。

與其滾動圖表，我希望圖表保持固定，而是滾動'筆'。效果將非常類似於展開線example found here

當我的線條到達可視區域的末端時，我想要回到起點並開始覆蓋以前繪製的線條。本質上筆會從左到右，跳回到左側並重復。

我能想到的唯一方法就是不斷更新需要更改和重繪的數據集部分。我擔心這將迫使整個線路重新繪製，這在性能方面是不可接受的。

我在想什麼？什麼是最好的/優化的方式來完成這項任務？

來源

2014-05-08 user1073928

原則上，所有你需要做的是不同的數據進入你想顯示並據此畫出他們的兩行。快速演示[這裏]（http://jsfiddle.net/E9zwB/）。動畫作爲練習留給讀者:) –

在這種方法中，兩個路徑都不會完全重繪每個區間？該圖需要支持多條路徑，每條路徑的分辨率爲每秒幾百個數據點，並且每秒都會有新數據。如果路徑正在重新渲染，我擔心性能。 – user1073928

找出這個問題的唯一方法是嘗試一下。 –

var live_data = [...];// live values you should write and rewrite in this array 
... 
var live_path = svg.append("svg:path").attr("d", live_line_form(live_data)); 
...

和d屬性格式：

function live_line_form(array_of_values){ 
    var d = "M", x_domain = 1.0, y_domain = 1.0; 
    array_of_values.forEach(function(val, i){ 
     d = d + i * x_domain + "," + val * y_domain + " " 
    }); 
    return(d.trim); 
}

來源

2015-03-30 04:02:22

回答

相關問題