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

D3.js：嵌套选择？

1 个答案: