D3使用for循环链接动画

Question

我想链接d3动画到for循环。什么是才达到这样的事情最好的办法：

for (var i=0; i<dat.length-1; i++) { 
     var a = function(g,dat,i){ 
      /* 
      g.transition().duration(i * 19) 
       .attr("cy", dat[i+1].y1) 
       .attr("cx", dat[i+1].x1) 
       .attr("r", 10);*/ 
      console.log("transform " + dat[i+1].x1); 
     }; 

     var t = setTimeout(a(g,dat,i), i*20); 
    } 

这是科西嘉不是工作，因为你不能传递对象的setTimeout功能。

Answer 1

您可以使用transition.delay（）链转换。 https://github.com/mbostock/d3/wiki/Transitions#wiki-delay

for (var i = 0; i < dat.length - 1; i++) { 
    g.transition().duration(20).delay(i * 20) 
     .attr("cy", dat[i + 1].y1) 
     .attr("cx", dat[i + 1].x1); 
} 

Answer 2

我发现我工作的解决方案。我觉得它仍然是难看的代码，但至少它是有效的。

首先我创建一个unvisible对象在我的数据集的每个数据：

g.data(dat) 
.enter() 
.append("circle") 
.attr("class", function(d,i) { return "default " + d.pn; }) 
.attr("cx", function(d,i) { return d.x1; }) 
.attr("cy", function(d,i) { return d.y1; }) 
.attr("r", function(d,i) { return d.r; }) 
.style("opacity", 0); 

然后我去shedule每个单一元素的过渡：

 g.each(function(d,i){ 
      var delay = Math.floor((i+1)/nrOfElements); 
      //console.log(delay); 
      d3.select(this) 
       .transition() 
       .delay(delay * speed) 
       .duration(speed + DELAY_OFFSET) 
       .style("opacity", 100) 
       .attr("cx", function(d) { return i<dat.length-1 ? dat[i+1].x1 : dat[i].x1; }) 
       .attr("cy", function(d) { return i<dat.length-1 ? dat[i+1].y1 : dat[i].y1; }) 
       .attr("r", function(d) { return i<dat.length-1 ? dat[i+1].r : dat[i].r; }) 
       .style("stroke", "blue") // TODO: setAttributes 
       .each("end", function() { 
        // Reset to privious attributes 
        d3.select(this) 
         .attr("cx", function(d) { return dat[i].x1; }) 
         .attr("cy", function(d) { return dat[i].y1; }) 
         .attr("r", function(d) { return dat[i].r; }) 
         ; 

        if(i<dat.length-nrOfElements) d3.select(this).style("opacity", 0); 
       }) 
       ; 
     }); 

这似乎是一个巨大的努力在编码给我一个相当简单的要求...但至少它工作..

更好的解决方案仍然欢迎！