Javascript 图表未正确更新

我试图学习Mike Bostock关于d3js（）的教程，以了解如何动态更新图表，但我面临一些障碍

在我的图表中，我左边的栏不是简单地被删除，而是被发送到我的图表后面，我不明白为什么：

JS:

以下是JSFIDLE：

我不明白的另一件事是为什么我们不使用.update（）？如果我理解正确的话，.enter（）用于创建DOM元素，其中数据在DOM中找不到任何匹配项，.exit（）用于查找不在数据中的DOM元素，因此我不应该使用update（）将所有其他列移到左侧吗

非常感谢

---

最佳

问题出在这一块：

        rect.exit().transition()
          .duration(1000)
          .attr('x', function(d, i) { return x(i - 1) - .5})
          .remove();

第三行（

.attr

）重新分配坐标。如果你想让他们真正退出，你可以删除这一行

        rect.exit().transition()
          .duration(1000)
          .remove();

        rect.exit().transition()
          .duration(1000)
          .remove();