Queue of transitions in d3.js; one by one

Question

I've tried to make chained transitions in d3.js. For this I define a set of transitions in an array and (try) make a function to call recursively them using .each("end", function()), to start a transition when the previous is finish, but I don't have results yet.

List of actions

    animations = [  function(){  console.log(1); return circle.transition().duration(2e3).attr("cy", Math.random()*300); } ,
                    function(){  console.log(2); return rect.transition().duration(3e3).attr("fill", "#"+((1<<24)*Math.random()|0).toString(16)); },
                    function(){  console.log(3); return circle.transition().duration(1e3).attr("r", Math.random()*500); },
                    function(){  console.log(4); return circle.transition().duration(2e3).style("fill", "#"+((1<<24)*Math.random()|0).toString(16)); },
                    function(){  console.log(5); return circle.transition().duration(1e3).attr("cx", Math.random()*500); }]

The recursive function

    function animate(index){
        if(index < animations.length - 1){
            index = index + 1
            return animations[index]().each("end", animate(index))
        } else {
            return true
        }
    }

The jsfiddle is here, this is an example using a recusive function.

Thank you all in advance.

score 5 · Accepted Answer · answered Mar 28 '13 at 22:49

5

You're almost there!

Instead of

return animations[index]().each("end", animate(index))

you need

return animations[index]().each("end", function() { animate(index) })

See updated jsFiddle

answered Mar 28 '13 at 22:49

meetamit

24,727
9
57
68

Yeah, really close! How the elements in the array are function I did not think I need a explicit a function in the parameter of the each. Again, thanks! – jbkunst Mar 28 '13 at 23:36
@user829971 Happy to help! Why not accept this answer then (or upvote)? It's mah peanuts :) – meetamit Mar 29 '13 at 00:19
1

Sorry! I cant voye up, I don`t have the enough reputation. – jbkunst Mar 29 '13 at 05:33
2

@Terbiy the OP must have deleted the original jsfiddle, which deleted mine too – meetamit Jun 17 '16 at 18:20

Queue of transitions in d3.js; one by one

1 Answers1

Linked