CODEWITHSUNDEEP
javascriptsvgd3.js
artfulrobot
artfulrobot

Reputation: 21397

How to remove parent DOM node after d3 selection().exit()

I'm using d3 to create some SVG infographics. On the selection.enter() set I'm appending a group (g) and within that I'm appending a path, which gets animated. On the exit() selection I need to animate the path, then at the end of the animation, completely remove the parent g.

When I say completely remove, I mean to do a node.parentNode.removeChild(node) - that is, I don't want to use d3's remove() function which just removes it and keeps a reference (as this creates problems with re-adding).

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

So whatGoesHere needs to trigger after the transition() completes on the path and remove the parent g object completely.

I have accomplished this using:

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

But it feels like there ought to be a d3 way to get 'back' from a selection to the parent selection, from a transition object called on a child? Perhaps I could var byebye = svg.exit(), then do the select('path') with the transition, then do something with the byebye selection of parent groups, but then how to get that to wait for the transitions on the children?

Upvotes: 3

Views: 952

Answers (1)

artfulrobot
artfulrobot

Reputation: 21397

Put the transition on the parent:

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
;

Upvotes: 3

Related Questions