d3.js - 如何在 d3 中的列下退出().transition rects

Question

我有一个堆叠条形图，显示月份或年份的值。

它由一系列列(1 或 12)组成，并在每列中排列(9 个单独的值)。

您可以在这里看到它:(注意 - 这是一个有效的网页，当前在 AWS 上运行。)

http://54.245.225.47/stackedbar_ex_good

当我从月 View 转到年 View 时，我想将所有位置移动到年值，然后将它们作为年值淡出 .enter()。

问题是 rects(我通常会在其中执行 .exit().transition().attr("y", new_val) 自列被删除以来从未被调用 (.exit())。当我尝试从 svg.selectAll(".col").exit().transition() 中引用子 .rects ，它们似乎一下子就消失了。我猜这是错误的方式。

抱歉，这太困惑了!我敢肯定这种事情在其他地方得到了回答，但我什至不知道正确描述它的语言(因此搜索它)。任何提示/指示将不胜感激。

(有很多代码 - 我不知道如何简化才能发布它。)

Answer 1

是的，有点难以理解这个问题...据我了解，您想在退出的矩形从 SVG 中删除之前将它们设置为某个位置的动画。但是你的问题是 rect 的父级——你代码中的 col——被立即删除，所以嵌套的 rect 永远没有机会动画。对吧？

如果是这样，一种解决方法是延迟移除现有的 col，以便为 rects 动画播放时间。所以，与其这样做:

col.exit().remove()

像这样应用延迟:

col.exit().transition().delay(2000).remove()

这里没有实际可见的过渡；这只是延迟调用 remove() 的一种方法。