Javascript D3.js：停止被中断的过渡？

我正在使用D3.js。我的转换运行得很好，但我只有一个问题：如果第二个转换在第一个转换结束之前开始

这是一个演示问题的JSFIDLE：

它在大多数情况下都可以正常工作-CDG和LAX会随着数据的更改而被追加和删除-但是如果您连续快速单击按钮两次，您会注意到新元素不会出现

以下是我的代码：

function update(data) { 

  var g = vis.selectAll("g.airport").data(data, function(d) { 
    return d.name;  
  });
  var gEnter = g.enter().append("g")
  .attr("class", function(d) {    
    return "airport " + d.name;
  });
  // Perform various updates and transitions... 
  [...]

  // Remove exited elements. 
  g.exit().transition()
    .duration(1000)
   .attr("transform", "translate(0," + 1.5*h + ")");
  g.exit().transition().delay(1000)
   .remove();
}

d3.select('#clickme').on("click", function() {  
  update(current_data); 
});

我试图添加一些调试语句来了解发生了什么，但我所能看到的是，当它发生时，退出选择中有4个元素，而不是3个-我不明白为什么会这样

---

在D3或基本JavaScript中，是否有一种方法可以确保转换不会重叠？

在D3中，较新的转换总是中断并覆盖较旧的转换。您可以使用例如

---

发生的情况是，数据表示在从DOM中删除之前“重新进入”（因为您的remove（）调用链接在转换上）。但是，如果数据表示尚未从DOM中删除，则enter（）选择将不包含该数据，因为它已经存在！然而，您的转换将继续执行，您的数据表示将消失，而没有机会“重新进入”

您需要做的是为现有元素提供某种标识符。例如：

g.exit().classed('exiting', true);

然后，当您更新选择时，如果元素“重新输入”，请取消退出转换并将其恢复到原始状态：

g.filter('.exiting')
    .classed('exiting', false)
    .transition() // new transition cancels the old one so that remove() isn't called
        .attr('foo', 'bar'); // return to original state

我已经调整了你的小提琴来演示解决方案：

---

这里有一个精简的提琴来清楚地演示这个问题（和解决方案）：

更新：自D3的3.5版（2014年10月）以来，通过使用。您只需为每个转换添加不同的名称。

谢谢。我不知道如何将其应用到我的具体案例中，但是-你的意思是将

每个

方法附加到我的更新转换中，然后将退出转换放在该

每个

调用中？你需要监听并在下一个转换发生后才开始。或者，研究一下。这是一个您应该签出的示例。此外，删除发生在转换结束时，因此您不需要创建两个退出转换来删除节点。看，这个方法很聪明。谢谢我觉得这很有用。当向一个对象添加两个同名的转换时，转换是互斥的，即第二个转换会中断/取消第一个转换。这就是我想要的答案

g.filter('.exiting')
    .classed('exiting', false)
    .transition() // new transition cancels the old one so that remove() isn't called
        .attr('foo', 'bar'); // return to original state