javascript - 在 D3.js 中子转换结束后删除父级

Question

使用 D3.js，我想对子元素执行转换（动画），并在转换结束时删除父元素。

1. 如何确保孩子过渡结束？

2. 如何删除父元素？在 jQuery 语法中，它将是 $(this).parent().remove();

   li.enter() .append('li') .append('i') .text(function (d) { return d; });

   li.exit() .selectAll('i') .transition() .style('opacity', 0) .remove(); // 这里删除父级...

演示：http: //jsbin.com/elaxom/1/edit

Answer 1

1. 如何确保孩子过渡结束？

我在这里学习：在转换结束时调用回调 ，我可以像这样使用 transition.each([type],listener) ： d3.selectAll('i').transition().each('end', function () { ... }); 在每个元素转换“结束”事件上触发回调。

2. 如何删除父元素？在 jQuery 中它将是 $(this).parent().remove();

这种语法对我有用：

d3.select(this.parentNode).transition().style('opacity', 0).remove();

这是最后的演示：http: //jsbin.com/elaxom/4/edit