使用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

您可以利用transition.delay()方法來指定延遲。 因為您使用的是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);