我的数据如下所示:
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
这些圆形和文本元素的选择,以便将它们从图表底部平滑过渡?