我是D3 JS的新手。 我花了一些时间来学习D3 js并构建一种时间表（我不确定这是什么术语）并为它制作动画。
现在我在退出转换时发现了一个奇怪的行为，当我尝试删除行中的最后一个元素时，动画完美无缺，但是当元素不是最后一个元素时，D3会在没有动画的情况下删除它。
很难理解我的问题，观看它真的很容易！ ：）
我在这里创造了一个工作小提琴：http://jsfiddle.net/fLBq4/5/
现在......我真的很惊讶因为删除元素的代码对于两次执行都是一样的：
frames.exit()
.transition()
.duration(500)
.attr('width',0)
.remove();
此外，我实现了“开始”和“结束”转换事件的监听器（你不会在小提琴中找到它们）。这些事件被正确触发，即'end'事件在启动后500毫秒正确计时。
在我的情况下，为什么D3不会以相同的方式为所有元素设置动画？
答案 0 :(得分：4)
发生的事情是你被D3的数据匹配所困扰。突然消失的栏不在退出选择中，它在更新选择中。 第二个栏位于退出选择中并逐渐消失，但第一个栏会立即移动到其位置，因此您无法实际看到它。我已添加了对更新选择的转换，因此您可以查看here发生了什么。
发生这种情况的原因是D3默认情况下按索引匹配数据和DOM元素。也就是说，第一数据元素对应于选择中的第一个DOM元素，依此类推。在您的特定情况下，您要从数组中删除一个元素，因此最后一个DOM元素最终不匹配，并成为退出选择的一部分。然而，其他元素会改变它们的位置（因为新数据与它们匹配）。
要修复，只需提供一个告诉D3如何匹配数据和DOM元素的函数，例如
var frames = groups.selectAll('.frame')
.data(function(d){return d;}, function(d) { return d.start; });
完整演示here。