我希望在我的D3图的链接上实现流量指示器，如本块所示。
该块使用stroke-dashoffset关键帧CSS动画来实现流程，虽然看起来不错，但CPU使用率几乎为100。
我读到您可以通过包含某些CSS属性来欺骗某些浏览器来触发GPU加速，但是其他消息来源指出这不再起作用，并且当然，尝试添加时，我当然看不到任何好处transform: translateZ(0);。
我一直在研究其他选项，并尝试以这种样式沿线实现移动标记。因为只有一种标记的性能更好，但是当我添加多种标记时，性能却更差。
是否还有另一个性能更高的选项可以使标记沿SVG路径动画化？
如果没有另一种方法，我将尝试添加控件以停止/启动动画，但这将是最后的选择。
提前致谢！
似乎确实为该stroke-dashoffset属性设置动画会导致大量计算。原始示例在Firefox中打开时导致CPU使用率约为50％。
还有另一种方法似乎可以提供更好的结果：使用手动递增stroke-dashoffsetand循环setInterval。这是概念证明：
http://bl.ocks.org/kmandov/raw/a87de2dd49a21be9f95c/
这是我更新dashoffset的方法：
var lines = d3.selectAll('.flowline');
var offset = 1;
setInterval(function() {
lines.style('stroke-dashoffset', offset);
offset += 1;
}, 50);
我知道它看起来不太好，但是（出乎意料的是）它的性能要比依靠CSS动画或过渡好得多。在Firefox中，我现在获得约15％的CPU使用率。
我可以想象，如果链接很多，这种方法将无法很好地执行，因为更新将花费很长时间。但这对于一些简单的用例来说是可行的，因为您可以线性地对固定数量的链接进行动画处理。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句