私は D3.js で作業しており、ネストされた選択と一般的な更新パターンを理解しようとしています。
私のデータは次のようになります。
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これらの円とテキスト要素の選択を取得して、グラフの下部からスムーズに移行できるようにするにはどうすればよいですか?