javascript - D3.js: Stop transitions being interrupted?

Question

I'm working with D3.js. I've got transitions working nicely, but I just have one problem: if a second transition starts before the first one ends,

This is a JSFiddle demonstrating the problem: http://jsfiddle.net/kqxhj/11/

It works fine most of the time - CDG and LAX get appended and removed as the data changes - but if you click the button twice in rapid succession, you'll notice that the new elements don't appear.

This is the meat of my code:

function update(data) { 

  var g = vis.selectAll("g.airport").data(data, function(d) { 
    return d.name;  
  });
  var gEnter = g.enter().append("g")
  .attr("class", function(d) {    
    return "airport " + d.name;
  });
  // Perform various updates and transitions... 
  [...]

  // Remove exited elements. 
  g.exit().transition()
    .duration(1000)
   .attr("transform", "translate(0," + 1.5*h + ")");
  g.exit().transition().delay(1000)
   .remove();
}

d3.select('#clickme').on("click", function() {  
  update(current_data); 
});

I've tried to add some debug statements to figure out what's going on, but all I can see is that when it happens, the exit selection has 4 elements in, not 3 - I don't understand why this is.

Is there a way, either in D3 or in basic JavaScript, that I can ensure the transitions don't overlap?

Answer 1

UPDATE: Since the version 3.5 of D3 (October 2014), it is possible to perform concurrent transitions on elements through the use of named transitions. You simply have to add a different name to each transition.