Question

我希望在我的D3图表的链接上实现流量指标，如this block。

该块使用stroke-dashoffset关键帧CSS动画来实现流程，虽然看起来不错，但CPU使用率几乎达到100。

我读到你可以通过包含某些CSS属性来诱骗某些浏览器触发GPU加速，但是其他来源表明这不再有效，当然我在尝试添加transform: translateZ(0);时看不到任何好处（例如）。

我一直在调查其他选项，并尝试以this样式沿着一条线实现移动标记。对于只有一个标记性能更好，但是当我添加多个性能时更糟糕。

是否有另一个更高性能的选项可用于在SVG路径下设置标记动画？

如果没有其他方法，我会尝试添加控件来停止/启动动画，但这将是最后的手段。

提前致谢！

Answer 1

似乎确实动画stroke-dashoffset属性会导致大量计算。当我在Firefox中打开它时，原始示例导致CPU使用率约为50％。

另一种方法似乎可以提供更好的结果：手动增加stroke-dashoffset并使用setInterval循环。这是一个概念证明：

以下是我更新dashoffset的方法：

var lines = d3.selectAll('.flowline');

var offset = 1; 
setInterval(function() {
  lines.style('stroke-dashoffset', offset);
  offset += 1; 
}, 50);

我知道它看起来并不是很好，但它（令人惊讶地）比依赖css动画或过渡更好。在Firefox中，我现在的CPU使用率约为15％。

我可以想象，如果您有很多链接，这种方法将无法很好地执行，因为更新将花费太长时间。但是对于更简单的用例，它可能是一个可行的黑客，你可以线性地为固定数量的链接设置动画。