Staggered transition in multi line graph

Question

I'm new here and to d3.js/JavaScript in general. I would like to add a transition to a multi line graph so that each line (and associated label) is 'drawn' one after the other. I've managed to get this to work for the first line (and to a lesser extent all lines at the same time) but am struggling to see how I can stagger the transitions. I've tried using a `for` loop and `.each()` to call the transition via a function but haven't really got anywhere with either approach. Any help would be gratefully received. Relevant part of the code below. Thanks. ``` var country = svg.selectAll(".country") .data(countries) .enter().append("g") .attr("class", "country"); var path = country.append("path") .attr("class", "line") .attr("d", function(d) { return line(d.values); }) .style("stroke", function(d) { return color(d.country); }) var totalLength = path.node().getTotalLength(); d3.select(".line") .attr("stroke-dasharray", totalLength + " " + totalLength) .attr("stroke-dashoffset", totalLength)…

Accepted Answer

You can use `.delay()` with a function to do this:

```
d3.select(".line")
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
.transition()
  .delay(function(d, i) { return i * 1000; })
  .duration(1000)
  .ease("linear")
  .attr("stroke-dashoffset", 0)
  .each("end", function() {
    d3.select(".label")
      .transition()
        .style("opacity", 1);
    });
```

Staggered transition in multi line graph

Solution

Problem