javascript - 使用 d3js 顺序动画 SVG

Question

我有一个复杂的 SVG 路径，由许多用 M#、#L#、# M#、#L#、# 定义的段组成。我想为这条路径的绘图设置动画，但要按照它们列出的顺序进行。我已经尝试过此处列出的解决方案:Can't make paths draw growing slowly with D3 , 但他们平行绘制路径的每一段。我如何修改它以便它们按顺序进行动画处理？

Answer 1

D3 转换有一个 delay() 函数，允许您指定何时开始动画。您可以使用它在绘制前一个路径段后开始绘制连续的路径段。您还可以使用转换的 end 事件在前一个转换完成后开始下一个转换。这样，您甚至不必指定延迟。

或者，您可以在没有 Javascript 的情况下在 SVG 本身中为路径设置动画。参见 here举个例子。您需要做的基本上就是将 animate 元素附加到 path 以告诉它如何绘制它。