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();