javascript - d3.js: Transition callback is not called for enter() -

i using modified version of d3 tutorial bar chart.

what important me animations should not stack upon leaving browser window trigger of them when window in focus again, causing browser hang, per this suggestion, i'm trying use settimeout instead of setinterval should called when animation has ended.

i'm having problems callbacks , don't understand why simple transition() callback working, not enter() example.

after set chart & scale, here's how initializing function looks like:

function redrawtimer() {   data.shift();   data.push(next());   redraw(function(){     console.log('callback');     settimeout(redrawtimer, 1500);   }); }  settimeout(redrawtimer, 1500);  function redraw(callback) {    var rect = chart.selectall("rect")       .data(data, function(d) { return d.time; });    rect.enter().insert("rect")       .attr("x", function(d, i) { return x(i + 1) - .5; })       .attr("y", function(d) { return h - y(d.value) - .5; })       .attr("width", w)       .attr("height", function(d) { return y(d.value); })       .attr("fill", "white")       .attr("fill-opacity", 0.2)     .transition()       .duration(1000)       .attr("x", function(d, i) { return x(i) - .5; })       .each('end', callback); // doesn't work @    rect.transition()       .duration(1000)       .attr("x", function(d, i) { return x(i) - .5; });       //.each('end', callback); // works each of 50 elements    rect.exit().transition()       .duration(1000)       .attr("x", function(d, i) { return x(i - 1) - .5; })       //.each('end', callback) // works after first transition using trigger next data point useless       .remove(); } 

see this jsfiddle fiddling code :)

it may not understand how transition() works differently on either enter() or exit() or selector.

can enlighten me?

if can make callback work, doesn't solve problem stated above (animations on browser leaving), please me well, i'll upvote comments/answer.

edit:

i managed rid of animation queue buildup testing element transition has ended, , take last one:

rect.transition()       .duration(1000)       .attr("x", function(d, i) { return x(i) - .5; })       .each('end', function(d, i){         if(i == 49)           callback();       }); 

elements can have one active transition @ time. rect.enter().transtition() gets overwritten rect.transition() (rect update selection contains entering elements!). therefore rect.enter().transition().each('end', callback) never gets called.

for more information see api documentation on transitions or mike's tutorial.