Javascript 如何在d3 selection()之后删除父DOM节点。exit()
我正在使用d3创建一些SVG信息图形。在Javascript 如何在d3 selection()之后删除父DOM节点。exit(),javascript,svg,d3.js,Javascript,Svg,D3.js,我正在使用d3创建一些SVG信息图形。在selection.enter()集合中,我将附加一个组(g),并在其中附加一个路径,该路径将设置动画。在exit()选择中,我需要设置路径的动画,然后在动画结束时,完全移除父级g 当我说完全删除时,我的意思是做一个node.parentNode.removeChild(node)——也就是说,我不想使用d3的remove()函数,它只是删除它并保留一个引用(因为这会在重新添加时产生问题) 因此,在路径上完成转换()后,需要触发whatgoesher,并完
selection.enter()
集合中,我将附加一个组(g
),并在其中附加一个路径,该路径将设置动画。在exit()
选择中,我需要设置路径的动画,然后在动画结束时,完全移除父级g
当我说完全删除时,我的意思是做一个node.parentNode.removeChild(node)
——也就是说,我不想使用d3的remove()
函数,它只是删除它并保留一个引用(因为这会在重新添加时产生问题)
因此,在路径上完成转换()
后,需要触发whatgoesher
,并完全删除父g
对象
我通过以下方式完成了这项工作:
.each('end', function() {
this.parentNode.parentNode.removeChild(this.parentNode); });
但是感觉应该有一种d3方式从一个选择“返回”到父选择,从一个调用到子选择的转换对象?也许我可以var byebye=svg.exit()
,然后对转换执行select('path')
,然后对父组的byebye
选择执行一些操作,但是如何让它等待子组的转换呢?将转换放在父组上:
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保留了对移除元素的引用是什么意思——它没有。你能解释一下.remove()
怎么不适合你吗?@Larskothoff是的,我错了,谢谢。我编辑了这个问题以回应你的评论。
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
;