Question

我正在使用d3创建一些SVG信息图表。在selection.enter()集上，我附加一个群组（g）并在其中添加path，其中包含动画效果。在exit()选择中，我需要为path设置动画，然后在动画结束时，完全删除父g。

当我说完全删除时，我的意思是做node.parentNode.removeChild(node) - 也就是说，我不想使用d3＆＃39; remove()功能并保留一个引用（因为这会产生重新添加的问题）。

var svg = d3svg.selectAll('g').data(myData);
svg.enter().append('g').append('path').attr(...);
svg.exit().select('path')
  .transition()
  .duration(750)
  .attr(...)
  .whatGoesHere()
;

因此whatGoesHere需要在transition()完成后path触发，并完全删除父g个对象。

我使用以下方式完成了这项工作：

.each('end', function() {
  this.parentNode.parentNode.removeChild(this.parentNode); });

但感觉应该有一种d3方式来回归＆＃39;从选择到父选择，从一个叫孩子的transition对象？也许我可以var byebye = svg.exit()，然后通过转换执行select('path')，然后使用byebye选择的父组做一些事情，但是然后如何让它等待孩子们的过渡？

Answer 1

将转换放在父级上：

var svg = d3svg.selectAll('g').data(myData);
svg.enter().append('g').append('path').attr(...);
svg.exit()
  .transition()   // Set up the transition on the parent
  .duration(750)
  .remove()       // Triggers at the end of the transition
  .select('path')
    .attr(...)    // the transition gets applied to children
;

如何在d3选择（）之后删除父DOM节点.exit（）

1 个答案: