Javascript 使用transition.end（）承诺链接转换

当

transition.end（）

promise解析时，我试图通过调用我的

update

函数来链接转换。以下代码段位于此

update

函数中。完整的示例（此代码段是其中的一部分）可以在中找到

设t=d3
.transition（）
.持续时间（3000）
(完)
。然后（（）=>更新（新数据））；

---

问题是转换几乎是瞬间发生的，然后可视化在那里停留约3秒钟，直到再次调用更新。为什么会这样？如果我注释掉代码段的最后两行，转换将花费预期的3秒钟。（当然，本例中只有一个转换，因为我删除了循环。）

不要命名转换实例，而是在转换选择本身中使用承诺：

d3.select("#figure")
    .selectAll("circle")
    .data(newData, d => d)
    .transition()
    .duration(3000)
    .attr("cx", (_, i) =>
      i < N ? (i + 1) * (2 * r + s) : 300 - (i - N + 1) * (2 * r + s)
    )
    .end()
    .then(() => update(newData));

d3.选择（“图”）
.selectAll（“圆圈”）
.data（newData，d=>d）
.transition（）
.持续时间（3000）
.attr（“cx”，（u，i）=>
i更新（新数据））；

以下是更新的JSFIDLE：

以及相应的S.O.代码段：

设N=5；
设r=5；
设s=2；
设数据=d3.范围（2*N）；
d3.选择（“图”）
.selectAll（“圆圈”）
.数据（数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，（u，i）=>
i（dd）
.transition（）
.持续时间（3000）
.attr（“cx”，（u，i）=>
i更新（新数据））；
}
函数randInt（n）{
返回Math.floor（Math.random（）*n）；
}

---

根据，

转换。on（“end”，callback）

将为选择中的每个元素触发一次

回调。我希望它在整个转换结束时触发一次，即对整个选择触发一次，因此我使用了
end（）
promise。在第二个解决方案中，回调是否只触发一次，因为您在转换本身而不是在选择上定义了它？是的，它只触发一次，但您是正确的：在特定场景中，它只触发一次，如果您在转换选择中使用它，就像我回答中的第一个片段一样，它将为每个元素触发。