Question

我有一个我正在研究的项目受到了Amazing NYTimes Interactive Charts的启发，你可以在那里绘制图表，看看你如何与真实数据进行比较。我想用D3制作一个简单的版本。

虽然粗糙但有效。

然而，我想要做的是将线条画成＆＃39;一旦用户点击“我是怎么做的？”而在图表中，＆＃39;

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

使用stroke-dashoffset属性完成此效果。现在，在您的代码中，您正在向任何事物过渡。

首先，您需要将偏移量设置为路径的总长度，然后您需要转换为偏移量为0。

在您提供的示例中很清楚。

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

Answer 2

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);
    }

如何在D3中为线图设置动画

2 个答案: