需要D3动画线条图的说明

Question

我已经成功地从D3动画线条绘制示例中实现了一些代码，但是我对它的工作原理并不明智。 我真的很希望能逐行细分代码的工作方式。 我是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/zh-CN/docs/Web/SVG/Attribute/stroke-dasharray https://developer.mozilla.org/zh-CN/docs/ Web / SVG / Attribute / stroke-dashoffset 。

据我所知：

1. 将路径破折号模式初始化为totallength可见，而totallength不可见
2. 首先将dashoffset设置为totallength，仅使间隙部分可见
3. 从dashoffset过渡到0，仅使虚线部分可见。
4. 单击时，再次过渡到总长度破折号偏移，再次仅使间隙部分可见。

只是为了玩，更改仪表板的设置：.attr（“ stroke-dasharray”，totalLength / 2 +“” + totalLength / 2）