0

我正在使用 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这些圆形和文本元素的选择，以便将它们从图表底部平滑过渡？

4

1 回答 1

1

您只需要一个过渡即可删除特定机场的元素，因为所有内容都在一个组中。我已经在这里更新了你的 jsfiddle ，将所有内容都移到了底部。

关键的变化是我将转换分成两部分，首先移动元素，然后删除它们，然后设置“transform”属性而不是“y”，这对组没有任何作用。相关代码也在下面。

g.exit().transition()
  .duration(1000)
  .attr("transform", "translate(0," + 1.5*h + ")");
g.exit().transition().delay(1000)
  .remove();
于 2013-05-01T19:14:38.643 回答