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.
Post a Comment for "Recursive D3 Animation Issue"