使用SVG HTML CSS的高效連續滾動圖表

Question

我已經創建了一個實時圖表，其中新的數據點不斷被輸入和繪製。

目前我正在使用requestAnimationFame（），其中我每秒渲染元素的更新位置30次。

對於許多SVG元素，這可能會稍微慢一些。

用SVG動畫，CSS動畫或CSS轉換實現像這樣的連續滾動圖形的最有效方法是什麼？ （沒有第三方庫）。

在此先感謝。

Answer 1

這是一個很好的解決方案，在Fiddle。

這是來自Mike Bostock和他使用D3的令人敬畏的教程。在該教程中;麥克解釋如何實現從無到有的小提琴，但對你的重要組成部分，是redraw功能：

function redraw() { 

    var rect = chart.selectAll("rect") 
     .data(data, function (d) { 
     return d.time; 
    }); 

    rect.enter().insert("rect", "line") 
     .attr("x", function (d, i) { 
     return x(i + 1) - .5; 
    }) 
     .attr("y", function (d) { 
     return h - y(d.value) - .5; 
    }) 
     .attr("width", w) 
     .attr("height", function (d) { 
     return y(d.value); 
    }) 
     .transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i) - .5; 
    }); 

    rect.exit().transition() 
     .duration(1000) 
     .attr("x", function (d, i) { 
     return x(i - 1) - .5; 
    }) 
     .remove(); 

} 

它會根據輸入數據添加一個新的矩形和淡入淡出歷史最悠久的矩形，並因此產生所需的滾動行動。這應該很容易適應您的需求，但它確實承擔了一定數量的反應。

看起來您可能希望在您的問題的任何時間在屏幕上擁有無限制的rects，但最終這是不可取的。您可以設置顯示的最大數量的rects，這仍然可以讓您的網站高效運行。再也不會讓你和你的用戶崩潰了。一旦淡出足夠高時，淡入淡出效率比持續加載效率更高。