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

Question

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

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

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

用 SVG 动画、CSS 动画或 CSS 过渡实现像这样的连续滚动图形的最有效方法是什么。 (没有第 3 方库)。

提前致谢。

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

 } 

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

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