Adding on-exit transition to D3 circle pack-based reusable module

Question

I have a reusable module based on the d3.layout.pack graph example.

I added a transition on exit on the node elements but it seems like the transition works only for one data set and it's not working for the other.

Basically, to simulate the data update I am calling a function with setInterval this way:

 function test(){
     d3.select('#vis')
     .datum(data2)
     .call(cluster);
 }

 setInterval(test, 1500);

...and I added the transition this way:

 c.exit().transition()
     .duration(700)
     .attr("r", function(d){ return 0; })
     .remove();

You can find the data update section in the bottom of the file and find the exit transition handling on line 431.

Could you please check what's wrong?

Answer 1

The behaviour you're seeing is caused by the way data is matched in D3. For one of the data sets, all the data elements are matched by existing DOM elements and hence the exit selection is empty -- you're simply updating position, dimensions, etc. of the existing elements.

The way to "fix" this is to tell D3 explicitly how you want data to be matched -- for example by changing line 424 to

.data(nodes, function(d) { return d.name; });

which will compare the name to determine whether a data element is represented by a DOM element. Modified jsfiddle here.