如何退出()。转换在d3中的col下

时间:2013-02-13 22:16:44

标签: d3.js

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

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

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

http://54.245.225.47/stackedbar_ex_good

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

问题是rects(我通常会执行.exit()。transition()。attr(“y”,new_val)从不被调用,因为列被删除(.exit())。我尝试从svg.selectAll(“。col”)。exit()。transition()引用子.rect,它们似乎一下子消失了。我猜这是错误的方法。

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

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

1 个答案:

答案 0 :(得分:4)

是的,有点难以理解这个问题......正如我所理解的那样,你希望在将它们从SVG移除之前将其退出到某个位置。但是你的问题是你的代码中的父亲 - col被立即删除,因此嵌套的rects永远不会有机会动画。正确?

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

col.exit().remove()

像这样应用延迟:

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

这里没有实际的,可见的转变;这只是一种将呼叫延迟到remove()的方法。