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

Question

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

目前我正在使用requestAnimationFame(),其中我每秒渲染元素的更新位置30次.

对于许多SVG元素,这可能会有点慢.

使用SVG动画,CSS动画或CSS过渡实现这样的连续滚动图的最有效方法是什么.(没有第三方图书馆).

提前致谢.

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