d3 js退出动画不能正常工作

Question

我是D3 JS的新手。 我花了一些时间来学习D3 js并构建一种时间表（我不确定这是什么术语）并为它制作动画。

现在我在退出转换时发现了一个奇怪的行为，当我尝试删除行中的最后一个元素时，动画完美无缺，但是当元素不是最后一个元素时，D3会在没有动画的情况下删除它。

很难理解我的问题，观看它真的很容易！ ：）

我在这里创造了一个工作小提琴：http://jsfiddle.net/fLBq4/5/

• 点击'Draw'构建图表（数据从创建var demodata的外部js加载）
• 然后单击第二个按钮并观看星期日的最后一个元素。转换工作正常。
• 然后单击最后一个按钮。你会看到星期五的第一个元素在没有过渡的情况下被移除了！

现在......我真的很惊讶因为删除元素的代码对于两次执行都是一样的：

frames.exit()
.transition()
.duration(500)
.attr('width',0)
.remove();

此外，我实现了“开始”和“结束”转换事件的监听器（你不会在小提琴中找到它们）。这些事件被正确触发，即'end'事件在启动后500毫秒正确计时。

在我的情况下，为什么D3不会以相同的方式为所有元素设置动画？

Answer 1

发生的事情是你被D3的数据匹配所困扰。突然消失的栏不在退出选择中，它在更新选择中。 第二个栏位于退出选择中并逐渐消失，但第一个栏会立即移动到其位置，因此您无法实际看到它。我已添加了对更新选择的转换，因此您可以查看here发生了什么。

发生这种情况的原因是D3默认情况下按索引匹配数据和DOM元素。也就是说，第一数据元素对应于选择中的第一个DOM元素，依此类推。在您的特定情况下，您要从数组中删除一个元素，因此最后一个DOM元素最终不匹配，并成为退出选择的一部分。然而，其他元素会改变它们的位置（因为新数据与它们匹配）。

要修复，只需提供一个告诉D3如何匹配数据和DOM元素的函数，例如

var frames = groups.selectAll('.frame')
  .data(function(d){return d;}, function(d) { return d.start; });

完整演示here。