D3.js 如何退出()

D3.js 如何退出(),d3.js,D3.js,我有一个堆叠的条形图,显示月份或年份的值 它由一系列列(1或12)和每个列n中的矩形(9个单独的值)组成 您可以在这里看到:(注意-这是一个有效的网页,目前正在AWS上运行。) 当我从月视图转到年视图时,我希望将所有位置移动到年值,然后将它们作为年值淡出。enter() 问题是,自从列被删除(.exit())以来,从未调用过rect(我通常在其中执行.exit().transition().attr(“y”,new_val))。当我尝试从svg.selectAll(.col”).exit().t

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

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

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

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

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

抱歉,这太让人困惑了!我肯定这类问题在其他地方都有答案,但我甚至不知道正确描述它的语言(因此也不知道如何搜索)。任何提示/建议都将不胜感激


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

是的,有点难以理解这个问题……据我所知,您希望在将退出的矩形从SVG中删除之前将其动画化到某个位置。但您的问题是,在您的代码中,矩形的父项-
col
立即被删除,因此嵌套的矩形永远没有机会动画化。对吗

如果是这样,一种解决方法是延迟移除退出的
,以便给
矩形
动画播放时间。因此,不要执行以下操作:

col.exit().remove()
按如下方式应用延迟:

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

这里没有实际的、可见的转换;这只是延迟调用
remove()

的一种方式。是的,您完全理解我的问题。我尝试了您提到的方法,但肯定做了一些错误的事情。但这让我回到了正轨,我认为这是您提到的延迟和“子转换”的组合(参见此处)。我还没有完成(完成后将发布),但我非常确定:
col.exit().transition().selectAll(“rect”)。
col.exit().transition().delay(2500)。remove()@RossR comment对我特别有帮助。我能够将这一点推广到在移除整个g元素之前转换g元素中的一个圆元素的情况。这似乎是在通过移除祖先将子元素一起移除之前转换子元素的一般模式。
col.exit().transition().delay(2000).remove()