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

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

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

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

使用SVG动画、CSS动画或CSS转换实现这样的连续滚动图形最有效的方法是什么。（无第三方库）

---

提前感谢。

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

这是Mike Bostock和他关于使用的精彩教程。在该教程中；Mike解释了如何从头开始完成小提琴，但对您来说重要的部分是

重画功能：

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();

 } 

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

似乎您可能希望在任何给定的时间从您的问题开始在屏幕上显示不受限制的矩形，但最终这是不可取的。您可以将要显示的矩形数量设置为最大数量，以使您的站点仍能正常运行。它会为你和你的用户崩溃。一个淡入一个淡出比svg计数足够高时继续加载更有效
 你必须全部显示吗？不，最后30秒的窗口可以。谢谢，这是一个很棒的教程，但我不想使用任何第三方库，如D3。我想知道是什么让这样的动画更有效率。他们使用CSS转换吗？为什么不使用第三方库？这一切都可以在纯java脚本中完成（这就是库的工作方式），但您自己完成这项工作会花费大量额外的开发时间。我推荐d3是因为它做得很好。你可以在d3项目中进行挖掘，并将其用作纯js中自己完成这项工作的路线图。如果你想走这条路，过渡也会很好。