Recursive D3 Animation Issue

I am trying to run an animation using d3 by chaining animations together with recursion. I have a function animate that calls itself like this until all the animations are chained

Solution 1:

Your recursive function runs immediately - replace count++; with console.log(count++); - and you'll see the console will be filled with 1, 2, 3, ..., 59 right away. The transitions keep playing slowly because d3 automatically chains transitions, so:

svg.selectAll('circle')
  .transition().style("fill","pink")
  .transition().duration(10000).style("fill", "green")
  .transition().duration(400).style("fill", "red")

will turn the all the circles in svg pink, then green slowly, then red quickly. The recursive function you have basically chains together a big long list of 60 transitions and d3 slowly plays it out.

I'm not sure about the best place in your code to keep the count synced with the animation - maybe someone else can chime in? I would probably use d3.timer instead of a wonky recursive function.