javascript - 如何在 d3 selection().exit() 之后删除父 DOM 节点

Question

我正在使用 d3 创建一些 SVG 信息图表。关于selection.enter()设置我正在附加一个组 ( g ) 并在其中附加一个 path , 动画化。关于exit()选择我需要为 path 设置动画，然后在动画结束时，完全删除父项 g .

当我说完全删除时，我的意思是做一个 node.parentNode.removeChild(node) - 也就是说，我不想使用 d3 的 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 方法从一个选择“返回”到父选择，从 transition对象叫 child ？也许我可以var byebye = svg.exit() , 然后执行 select('path')随着过渡，然后用 byebye 做点什么 parent 群体的选择，但如何让它等待 children 的转变？

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
;