D3.js：嵌套选择？

Question

我在D3.js工作，并试图了解nested selections和general update pattern。

我的数据是这样的：

var data1 = [ 
{ 'name': 'LHR', 'position': 1, 'flights': [1,10,12,14,3] }, 
{ 'name': 'LAX', 'position': 2, 'flights': [3,6,12,6,3] }, 
{ 'name': 'SFO', 'position': 3, 'flights': [2,8,17,18,5] } 
]; 

渲染SVG是这样的：

<g class="airport LAX"> 
<text class="LAX legend" x="250" y="40" dy=".2em">LAX</text> 
<circle class="flight" cx="20" cy="16" r="3"></circle> 
<circle class="flight" cx="40" cy="22" r="3"></circle> 
<circle class="flight" cx="60" cy="34" r="3"></circle> 
<circle class="flight" cx="80" cy="22" r="3"></circle> 
<circle class="flight" cx="100" cy="16" r="3"></circle> 
</g> 

而且我想正在添加，更新和删除文本和圆形元素的平滑过渡 - 从图表顶部出现的新元素，更新的元素平滑移动，删除掉图表底部的元素。

这是到目前为止我的代码：http://jsfiddle.net/kqxhj/5/

我可以转换新的和更新的元素。但我不能这样做，因为某些原因，就是让exit选择这些元素很好地删除它们。

我怎样才能得到exit选择这些圆圈和文本元素，这样我就可以平滑地过渡不送图形的底部？

Answer 1

你只需要一个过渡删除元素特定机场的一切都是在一组。我已经更新了您的jsfiddle here，并将所有内容都移至底部。

的主要变化是，我已经分裂过渡到两到第一运动的元素，然后删除它们和第二设置“变换”属性，而不是它什么都不做团体“Y”。相关的代码也在下面。

g.exit().transition() 
    .duration(1000) 
    .attr("transform", "translate(0," + 1.5*h + ")"); 
g.exit().transition().delay(1000) 
    .remove();