javascript - D3.js: Stop transitions being interrupted? -

i'm working d3.js. i've got transitions working nicely, have 1 problem: if second transition starts before first 1 ends,

this jsfiddle demonstrating problem: http://jsfiddle.net/kqxhj/11/

it works fine of time - cdg , lax appended , removed data changes - if click button twice in rapid succession, you'll notice new elements don't appear.

this meat of 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 , 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 add debug statements figure out what's going on, can see when happens, exit selection has 4 elements in, not 3 - don't understand why is.

is there way, either in d3 or in basic javascript, can ensure transitions don't overlap?

what's going on data representation "re-enters" before has been removed dom (because remove() call chained on transition). however, if data representation hasn't been removed dom yet, enter() selection not contain data because exists! , yet, transition continue execute, , data representation disappear without having chance "re-enter".

what need give exiting elements sort of identifier. example:

g.exit().classed('exiting', true); 

then, when update selection, if element "re-entered", cancel exiting transition , bring original state:

g.filter('.exiting')     .classed('exiting', false)     .transition() // new transition cancels old 1 remove() isn't called         .attr('foo', 'bar'); // return original state 

i've tweaked fiddle demonstrate solution: http://jsfiddle.net/hx5tp/

here's stripped down fiddle demonstrate issue (and solution) clearly: http://jsfiddle.net/xbfsu/