CODEWITHSUNDEEP
javascriptsvgd3.js
vsfa
vsfa

Reputation: 43

d3js - Nodes don't get removed after transition on exit()

I have a chart where I create nodes dynamically as time goes by. After a certain time, I fade out the nodes and remove them.

I have the 2 variables:

I've tried the following

node = svg.selectAll(".nodes")
    .data(data_nodes, function(d){return d.id;});

node.exit.remove();

This works fine. When I inspect the SVG the nodes are removed properly

But when I do

node = svg.selectAll(".nodes")
    .data(data_nodes, function(d){return d.id;});

node.exit().transition()
    .duration(duration+100)
    .style("opacity", 1e-6)
    .remove();

The nodes fade out as expected but they don't get removed from the SVG element. The number of circles element in the DOM keeps on increasing.

When I check the size of data_nodes and node in the console, they're what I expect them to be but if I do a

d3.selectAll(".nodes") in the console I can see the number is wrong.

Thanks for the help.

SOLUTION:

It appears that my transition on exit() was too long and some of the nodes were coming back in, hence getting a transition assigned on enter().

Upvotes: 4

Views: 1720

Answers (1)

Mike Precup
Mike Precup

Reputation: 4218

Turning the comments into an answer, since it was the issue:

You're scheduling another transition during your first transition, which cancels the remove.

From the docs:

If a newer transition is scheduled on any of the selected elements, these elements will not be removed; however, the "end" event will still be dispatched.

Upvotes: 4

Related Questions