Javascript 使用setTimeout延迟d3转换

我正在尝试沿螺旋曲线创建一个简单的平面动画

然而，我在尝试使用d3的延迟功能延迟转换时遇到了问题，动画似乎无法正常运行

因此，我一直在考虑使用setTimeout来延迟转换函数的触发，但似乎无法正确执行。有人能给我一个建议吗

。这包括没有setTimeout或任何.delay的原始转换；v15显示使用.delay时的错误；v16有我用setTimeout尝试过的功能

这是我在没有setTimeout的情况下进行转换的代码（没有.delay就可以正常工作）

这是我尝试添加setTimeout的结果

function transitionThis(d,i) {
d3.select(this).transition()
.duration(3000)
//.delay(3000) //causes error in the animation
.ease("exp")
.each("start", function() { d3.select(this).style("opacity", "1"); })    
  .attrTween("transform", translateAlong(path.node()))
  .styleTween("opacity", function () {return d3.interpolate("1", "0");});
}

function delayedFlight() {
var tOut = setTimeout(transitionThis(),3000);
}
plane.each(delayedFlight);

---

发生的情况如下：出于某种原因，向转换中添加

.delay（）

可以使插值函数（返回转换值的函数）每隔一段时间在一行中调用两次，调用的值相同

t

。例如，这里是我插入

console.log（t）

时得到的输出的子集：

这不是很漂亮，但可能还是比进入设置超时更好

---

啊，我明白了，这就是原因。它可能不是最漂亮的修复，正如你所说的，但我同意，比在TimeTimeOutin的中间更干净。非常感谢meetamit！！！小的超时不会出现此错误，因此我的最佳猜测是，经过大量时间后，浏览器已经处理了所有（延迟的）渲染和加载，因此动画帧会更快出现。请注意，D3源代码中没有任何内容可以防止（甚至检测）重复

t

的值。

function transitionThis(d,i) {
d3.select(this).transition()
.duration(3000)
//.delay(3000) //causes error in the animation
.ease("exp")
.each("start", function() { d3.select(this).style("opacity", "1"); })    
  .attrTween("transform", translateAlong(path.node()))
  .styleTween("opacity", function () {return d3.interpolate("1", "0");});
}

function delayedFlight() {
var tOut = setTimeout(transitionThis(),3000);
}
plane.each(delayedFlight);

0.006692062648206693
0.006707542472169953
0.007238969233518517
0.007255714140926161
0.0077049430038543705
0.0077049430038543705 // <- same as previous
0.008568945153864268
0.008588766510821856
0.00899496468906235
0.00899496468906235   // <- same as previous
0.009529833123126597
0.00955187716946928
0.01107410052517391
0.011099716711945125
0.012516716837337842

    // Happens every once in a while
    if (t == t0) {
        // Move t0 "back in time" a bit
        t0 -= .00001;
    }