d3.js中的转换队列;一个接一个 [英] Queue of transitions in d3.js; one by one

问题描述

我试图在d3.js中创建链接的过渡。为此，我在数组中定义一组过渡，并且（try）使一个函数使用 .each（end，function（））

操作列表

  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）; }] 
  

递归函数

  function animate（index）{
 if（index< animations.length  -  1）{
 index = index + 1 
 return animations [index] .each（end，animate（index））
} else {
 return true 
} 
} 
  

jsfiddle是这里，这是一个使用recusive函数的示例。

解决方案

p>而不是

  return animations [index]（）。each（end，animate（index））
  

  return animations [index]（）。each（end，function（）{animate（index）}）
  

查看更新的jsFiddle

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.

解决方案

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

这篇关于d3.js中的转换队列;一个接一个的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！