使用 SVG HTML CSS 的高效连续滚动图

Posted 2023-03-06

【中文标题】使用 SVG HTML CSS 的高效连续滚动图

【英文标题】：Efficient Continuous Scrolling Graph with SVG HTML CSS

【发布时间】：2013-12-13 23:05:19

【问题描述】：

我创建了一个实时图表，其中不断输入和绘制新的数据点。

目前我正在使用 requestAnimationFame() 以每秒 30 次渲染元素的更新位置。

对于许多 SVG 元素，这可能会有点慢。

使用 SVG 动画、CSS 动画或 CSS 过渡来实现像这样的连续滚动图形的最有效方法是什么？ （没有 3rd 方库）。

提前致谢。

【问题讨论】：

必须全部显示吗？

不，最后 30 秒的窗口就可以了。

【参考方案1】：

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 计数足够高时，淡入淡出比持续加载更有效。

【讨论】：

谢谢，这是一个很棒的教程，但我不想使用任何第三方库，如 D3。我想知道是什么让这样的动画如此高效。他们是否使用 CSS 过渡？

为什么不想使用第三方库？这一切都可以在纯 java 脚本中完成（库就是这样做的），但是您自己会花费大量额外的开发时间。我推荐了 d3，因为它做得很好。

您可以深入研究 d3 项目并将其用作路线图，在纯 js 中自己完成这项工作。

如果你想走那条路，过渡也可以很好地工作。