Queue of transitions in d3.js; one by one

问题

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.

回答1:

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

来源：https://stackoverflow.com/questions/15692910/queue-of-transitions-in-d3-js-one-by-one

标签

recursion

d3.js

transition