D3.js d3转换是否等待上一个？

我有上面的代码，是动画图形遍历。我希望第二次转换仅在链接转换后激活（最好删除持续时间）。我将如何做到这一点？我已经尝试过将整个第二行代码放在一个超时内，如下所示：

d3.select('#' + linkId[0]).transition().duration(2500).attr('stroke', 'green');
d3.select('#' + nodeId[0]).transition().duration(5000).attr('fill', 'blue');

---

然而，这完全打乱了事件的时间安排。我基本上在寻找类似于python的东西，在这里可以调用.sleep（毫秒）来指定代码执行等待一定的时间

有两个快速选项可用：

transition.delay（）

您可以使用

transition.delay（time）

来指定转换开始前的延迟。这看起来像：

setTimeout(() => {  d3 transition here }, 2500);

虽然简单，但我建议使用下一种方法

transition.on（“结束”，…）

另一个选项是使用

transition.on（“end”，function（）{/*设置下一个transition*/}）

。现在，

.on（“end”，callbackFunction）

将在每次转换结束时触发（如果转换多个元素，则在每个元素完成转换时触发），但您转换的是单个元素（因为ID是唯一的），因此您可以使用如下方式：

d3.select('#' + linkId[0]).transition().duration(2500).attr('stroke', 'green');
d3.select('#' + nodeId[0]).transition().delay(2500).duration(5000).attr('fill', 'blue');

如果有多个元素同时转换，那么在开始下一个转换之前，您需要稍微修改此项，以检查是否有任何转换仍在进行中

d3.select('#' + linkId[0]).transition()
  .duration(2500)
  .attr('stroke', 'green')
  .on("end", function() {
      d3.select('#' + nodeId[0]).transition().duration(5000).attr('fill', 'blue');
  })