d3.js - d3 js exit animation not working properly -

i'm new d3 js. spent time learn d3 js , build sort of time table (i'm not sure term) , animate it.

now found strange behavior on exit transition, when try remove last element in row animation goes when element not last one, d3 removes without animation.

it's hard understand problem, it's easier watch it! :)

i created working fiddle here: http://jsfiddle.net/flbq4/5/

• click 'draw' build graph (data loaded external js create var demodata)
• then click second button , watch last element of sunday. transition works correctly.
• then click last button. you'll see first element of friday removed without transition!

now... i'm surprised because code removing elements it's same both executions:

frames.exit() .transition() .duration(500) .attr('width',0) .remove(); 

moreover, implemented listeners 'start' , 'end' transition events (you not find them in fiddle). these events fired correctly, i.e. 'end' event timed correctly 500 msec after start.

why won't d3 animate elements in same way, in case?

what's happening you're getting caught out d3's data matching. bar disappears isn't in exit selection, it's in update selection. second bar in exit selection , disappears gradually, first bar moved position instantaneously, can't see that. i've added transition update selection can see what's happening here.

the reason happening d3 matches data , dom elements index default. is, first data element corresponds first dom element in selection , on. in particular case, you're removing element array, last dom element ends being not matched , becomes part of exit selection. other elements change position (as new data matched them).

to fix, provide function tells d3 how match data , dom elements, e.g.

var frames = groups.selectall('.frame')   .data(function(d){return d;}, function(d) { return d.start; }); 

complete demo here.