需要D3动画线图说明

Question

我已经成功地实现了来自this D3 example of animated line drawing 的一些代码，但我并不知道它是如何工作的。我真的很感激逐行分解代码的工作原理。我对 D3 比较陌生；我了解使用该库操作 DOM 的基础知识，但我觉得这需要我缺乏的中级理解。

我在下面包含了我重新设计的示例的特定部分。我怀疑聪明的部分与.attr("stroke-dashoffset", 0); 和.attr("stroke-dashoffset", totalLength); 部分有关，因此非常感谢您清楚地解释这些部分如何工作以及它们如何促成效果。

var totalLength = path.node().getTotalLength();

path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", 0);

svg.on("click", function(){
  path      
    .transition()
    .duration(2000)
    .ease("linear")
    .attr("stroke-dashoffset", totalLength);
})

在此先感谢

Answer 1

有趣的副作用。 无论如何，dasharray 和 dashoffset SVG 属性：https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharrayhttps://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset。

据我所知：

1. 将路径破折号模式初始化为总长度可见，总长度不可见
2. 首先将 dashoffset 设置为 totallength，只使间隙部分可见
3. 将 dashoffset 转换为 0，仅显示 dash 部分。
4. 点击时，再次转换到总长度虚线偏移，再次使只有间隙部分可见。

只是为了玩，改变dasharray的设置：.attr("stroke-dasharray", totalLength/2 + " " + totalLength/2)