使用D3不是同时顺序绘制线条

Question

我正在使用此处的代码绘制SVG的行：https://github.com/dcamilleri/F1Data-Circuit-SVG-Draw。

这段代码专门为每个SVG路径绘制一条线。

var paths = circuit.getElementsByTagName("path");

  for(var i = 0; i < paths.length; i++) {

    var length = parseInt(paths[i].getTotalLength());

    d3.select(paths[i])
      .style("stroke-dasharray", length)
      .style("stroke-dashoffset", length)
      .transition()
      .duration(10000)
      .ease('linear')
      .style("stroke-dashoffset", 0);
}

此时每行在10秒钟内同时绘制。我想要的是在下一个完成之后绘制一条线。

我该怎么做？

Answer 1

您可以利用the documentation方法来指定延迟。因为你正在使用i，所以你可以将它乘以你设定的持续时间。

d3.select(paths[i])
  .style("stroke-dasharray", length)
  .style("stroke-dashoffset", length)
  .transition()
  .duration(10000)
  .delay(10000*i)
  .ease('linear')
  .style("stroke-dashoffset", 0);