CODEWITHSUNDEEP
d3.jssvg
rlsaj
rlsaj

Reputation: 735

Using D3 to draw lines sequentially not simultaneously

I am drawing the lines of an SVG using the code from here: https://github.com/dcamilleri/F1Data-Circuit-SVG-Draw.

This piece of code specifically draws a line for each SVG path. 

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

At the moment each line is drawn simultaneously over a 10 second period. What I want is to draw one line after the next is finished.

How do I do this?

Upvotes: 0

Views: 176

Answers (1)

aug
aug

Reputation: 11714

You can take advantage of the transition.delay() method which allows you to specify a delay. Because you're using i, you can probably just multiply it by the duration you have set.

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

Upvotes: 4

Related Questions