5

I have created a real-time graph where new data points are continuously being fed in and plotted.

Currently I am using requestAnimationFame() where I render the updated positions of the elements 30 times per second.

With many SVG elements, this can get a little slow.

What is the most efficient way to implement a continuously scrolling graph like this with SVG animations, CSS animations, or CSS transitions. (Without 3rd party libraries).

Thanks in advance.

4

1 回答 1

2

这是一个非常好的解决方案Fiddle。

它来自 Mike Bostock 和他关于使用D3的精彩教程。在那个教程中；Mike 解释了如何从头开始完成 Fiddle，但对您来说重要的部分是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();

 }

它将根据传入的数据添加一个新的矩形并将最旧的矩形淡出，从而创建您想要的滚动动作。这应该很容易适应您的需求，但它确实假设了固定数量的矩形。

似乎您可能希望在任何给定时间根据您的问题在屏幕上显示不受限制的矩形数量，但最终这是不可取的。您可以将要显示的矩形数量设置为仍然允许您的网站保持高性能的最大数量。再说了，它会为您和您的用户崩溃。当 svg 计数足够高时，淡入淡出比持续加载更有效。

于 2013-11-28T04:36:54.157 回答