D3.js : 중첩 선택?

Question

D3.js에서 작업 중이며 nested selections 및 general update pattern을 이해하려고합니다.

내 데이터는 다음과 같습니다

<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> 

그리고 추가, 업데이트 및 제거되고 텍스트와 원 요소 부드러운 전환을 싶습니다

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이있다 - 그래프 상단에서 나타나는 새로운 요소, 업데이트 된 요소가 부드럽게 움직이는 요소 및 삭제 된 요소가 그래프 아래쪽에 떨어지는 요소. 내가 새롭게 업데이트 된 요소를 전환 할 수 http://jsfiddle.net/kqxhj/5/

:

여기에 지금까지 내 코드입니다. 그러나 내가 무엇을 할 수 없는지는 이러한 요소들을 잘 제거하기위한 exit 선택을 얻는 것입니다.

이 원과 텍스트 요소에 대해 exit 선택을 어떻게 얻을 수 있습니까? 그래야 그래프 하단에서 부드럽게 전환 할 수 있습니까?

Answer 1

특정 공항에 대한 요소를 제거하려면 모든 전환이 하나의 그룹에 있어야하므로 전환 만하면됩니다. 모든 것을 아래쪽으로 이동시키는 트랜지션을 사용하여 here을 업데이트했습니다.

주요 변경 사항은 요소를 이동 한 다음 제거하고 두 번째로 "y"대신 "transform"특성을 설정하여 그룹에 대해 아무 작업도 수행하지 않는 것입니다. 관련 코드도 아래에 있습니다.

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