使用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()方法，該方法允許您指定延遲。因爲你在使用我，所以你可以在你設定的時間內乘以它。

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