javascript - 如何在 D3 中制作折线图动画

Question

我正在开发一个项目，其灵感来自 Amazing NYTimes Interactive Charts您可以在其中绘制图表并查看与真实数据相比的情况。我想使用 D3 制作一个简单版本。

Here is my working codepen so far

虽然很粗糙，但很有效。

但是，我想要做的是，一旦用户单击“我做得怎么样？”，就在图表上“绘制”这条线

This is a great example of what I'm after with the second line

我按照上面的示例，向 javascript 添加了一个转换，如下所示。

function addSecondLine(){
    focus.append("path")
        .datum(morePoints)
        .attr("fill", "none")
        .attr("stroke", "green")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line)
        .transition()
        .duration(4000);
}

但这并没有取得任何成果。

Answer 1

https://codepen.io/shreya0712/pen/ZEYYrMd?editors=1010

我希望这就是您一直在尝试的。

    function addSecondLine() {
      var line2 = focus
        .append("path")
        .datum(morePoints)
        .attr("fill", "none")
        .attr("stroke", "green")
        .attr("stroke-linejoin", "round")
        .attr("stroke-linecap", "round")
        .attr("stroke-width", 1.5)
        .attr("d", line);

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

      line2
        .attr("stroke-dasharray", totalLength)
        .attr("stroke-dashoffset", totalLength)
        .transition()
        .duration(2000)
        .attr("stroke-dashoffset", 0);
    }