javascript - 在 d3.js 中从起点到终点的一条线的过渡

Question

我有一张图表。我想看到图表线的逐点动画。我对 d3.js 的了解还不够。我试图鼓励她，但我不知道如何做到点对点。我该怎么做？一个例子是这样的:

https://jsfiddle.net/ej0wLtv6/

我的代码是这样的:

http://plnkr.co/edit/q6KkZjNDCozMUj5jdaKD?p=preview

city.append("path")
    .attr("class", "line")
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return z(d.id); })

Answer 1

使用您提供的 fiddle 作为引用:

你可以这样制作线上的动画:

//get all the lines 
city.selectAll(".line").each(function(d){
  //each line get the total length
  var totalLength = this.getTotalLength();
  //perform transition for line using dasharray and offset
    d3.select(this)
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(2000)
  .attr("stroke-dashoffset", 0);

})

工作代码here