Data entering and multiple transitions in D3.js

Question

I have used d3.js drawing multiple shapes in a single svg. It's something like:

var draw = svg.selectAll("draw").data(data[0]).enter();
draw.append...  //Drawing first group of shapes
draw.append...  //Drawing second group of shapes

I know this might not be the best way, but it works fine. Now I want to add some transtions to it. I also have data[1] , and I want the drawing from data[0] lasting 5 seconds, and make a transition to data[1] . data[0] and data[1] have the same format and everything. I know the basic transition way, in this case, I can enter data[0] and data[1] at the start and then in every append, add .transition().duration(2000).attr("...").delay(5000) ; but this is quite complex, if there is data[2], it means more code. How can I do this in the simpler way? Anyone help me? Thanks.

Answer 1

You can use a loop to create those transitions:

for(var i = 1; i < data.length; i++) {
  svg.selectAll("draw").data(data[i])
     .transition().duration(2000).delay(i * 5000)
     .attr(...);
}