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

Question

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

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

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

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

提前致谢。

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