链接转换所以 i 的结束触发 i+1 的开始：使用 .each("end", dothat)?

Question

我试着把汉字的笔划一个接一个地做成动画。为此 "at the end of i, start transition i+1"，我使用 each("end", animateSO(code,i+1))，其中 animateSO 因此会以增量回调自身。

// Animate strokes function
var animateSO = function(code, i){
var id= "#kvg\:"+code+"-s"+i, 
    next=i+1;
var path = d3.select(id);
var totalLength = Math.ceil( path.node().getTotalLength() );
    console.log("i: "+i+" ; id: "+id+" ; lenght: "+totalLength+"; i++: "+next);
path
  .attr("stroke-dasharray", totalLength + " " + totalLength)
  .attr("stroke-dashoffset", totalLength)
  .transition()
    .duration(totalLength*15)
    .ease("linear")
    .attr("stroke-dashoffset", 0)
    .each("end", animateSO(code, next));
}
animateSO("07425", 1);

我预计 .each("end", animateSO(code, next)) 在当前转换的结束时触发。但是所有的过渡都是一起开始的。

如何，"at the end of i, start transition i+1" ?

Fiddle: http://jsfiddle.net/0v7jjpdd/4/

编辑：最终结果http://jsfiddle.net/0v7jjpdd/7/

Answer 1

你需要把对animateSO的调用放在一个函数中，否则它会和其余代码一起调用：

.each("end", function() { animateSO(code, next) });

完成演示 here。

链接转换所以 i 的结束触发 i+1 的开始：使用 .each("end", dothat)?

Chaining transitions so end of i trigger the start of i+1 : use .each("end", dothat)?

d3.js

kanjivg