Recursive problem with d3 animation

Question

I am trying to start an animation using d3 by combining animations with recursion. I have an animate function that calls itself this way until all animations are chained together.

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

The visualization itself works, but I'm trying to track how many times the function was called, so I can display it on the screen in synchronization with the animation. However, recursion connects transitions together until the first one, even ends, so my counter is always only the number of the last transition.

Here's a jsfiddle that shows what I'm trying to do. It is strange that the radius of the circles is set correctly, i.e. When setting up attributes, it gets the correct score, and with the same animation call it is incorrect. I looked at old stack overflow problems, and I looked at d3 docs, and I can't find a good way to keep track of an account in all recursion. Does anyone know about this method?

Answer 1

Your recursive function starts immediately - replace count++; on console.log(count++); - and you will see that the console will be filled 1, 2, 3, ..., 59 immediately. Transitions continue to play slowly, because d3 automatically transitions circuits , therefore:

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

will turn all circles into svg pink, then slowly and then quickly. The recursive function that you mostly combine contains a large long list of 60 transitions and d3 that slowly reproduces it.

I'm not sure of the best place in your code so that the counter synchronizes with the animation - maybe someone else can call back? I would probably use d3.timer instead of an inactive recursive function.