如何在 d3 中的 col 下退出 ().transition rects

Ros*_*s R 2 d3.js

我有一个堆积条形图,显示月或年的值。

它由一系列列(1 或 12)和每列中的矩形组成(9 个单独的值)。

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

http://54.245.225.47/stackedbar_ex_good
Run Code Online (Sandbox Code Playgroud)

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

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

对不起,这太令人困惑了!我确信这种事情在其他地方得到了回答,但我什至不知道正确描述它的语言(因此搜索它)。任何提示/指针将不胜感激。

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

mee*_*mit 5

是的,有点难以理解这个问题......据我所知,你想在退出 rects 之前将它们从 SVG 中移除之前将它们动画到某个位置。但是你的问题是 rects 的父母——col在你的代码中——被立即删除,所以嵌套的 rects 永远没有机会动画。对?

如果是这样,一种解决方法是延迟 exiting 的移除,col以便让rects动画有时间播放。所以,而不是做:

col.exit().remove()
Run Code Online (Sandbox Code Playgroud)

像这样应用延迟:

col.exit().transition().delay(2000).remove()
Run Code Online (Sandbox Code Playgroud)

这里没有实际的、可见的过渡;这只是延迟调用的一种方式remove()

  • `col.exit().transition().selectAll("rect").<do rect stuff here> ` `col.exit().transition().delay(2500).remove() <-- 最后删除cols.` btw - 子转换链接:[链接](https://github.com/mbostock/d3/wiki/Transitions#wiki-transition) (2认同)