javascript - recursive d3 animation issue -

i trying run animation using d3 chaining animations recursion. have function animate calls until animations chained together

(function animate(transition) {     // code here      animate(transition.transition()) })(selection.transition()); 

the visualization works, i'm trying keep track of how many times function has been called can display on screen in sync animation. however, recursion chains transitions before first 1 finishes, counter number of last transition.

here's a jsfiddle shows i'm trying do. strange radius of circles set correctly, i.e. when setting attributes gets proper count, while in same call of animate it's incorrect. i've looked @ old stack overflow questions, , i've looked through d3 docs, , can't find way keep track of count throughout recursion. know of such way?

your recursive function runs - replace count++; console.log(count++); - , you'll see console filled 1, 2, 3, ..., 59 right away. transitions keep playing 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 circles in svg pink, green slowly, red quickly. recursive function have chains big long list of 60 transitions , d3 plays out.

i'm not sure best place in code keep count synced animation - maybe else can chime in? use d3.timer instead of wonky recursive function.