Recursive / recurring animation events in D3

Question

I am trying to make repeated transitions in D3 that will repeat endlessly. In particular, I work with a map, and I want background stars to flicker sometimes. The problem with the transitions is that they all seem to be running ahead of time, so he will try to do infinite recursion ahead of time and the page will never load. I found a related example ( recursive problem with d3 animation ) that is not infinite. My only idea is to use the d3 timer somehow, but I'm not quite sure how to do this. Any advice is appreciated.

Answer 1

That's right, you can't schedule an infinite number of transitions ahead of time. :) However, you can re-schedule a new transition when the old transition ends (or starts), using transition.each to listen for the end (or trigger) of events.

See an example of chained transitions for endlessly repeating animations. Whenever a transition begins in a circle, he also plans an identical next transition, allowing the transition for an indefinite time.

Alternatively, you can use setInterval or setTimeout to recreate transitions, as in the example of parallel transitions . Unlike the linked transition example that I linked, this approach does not guarantee accurate synchronization of chain transitions, but if all you need is a random flicker background, this might be a slightly simpler approach.