I am using a modified version of this D3 tutorial bar chart.

What is important for me is that animations should not stack upon leaving the browser window then trigger all of them when the window is in focus again, causing the browser to hang, so as per this suggestion, I'm trying to use a setTimeout instead of setInterval that should be called when the animation has ended.

I'm having problems with the callbacks and I don't understand why the simple transition() callback is working, but not the enter() for example.

After I set up the chart & scale, here's how my 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 at all

  rect.transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i) - .5; });
      //.each('end', callback); // Works but for each of the 50 elements

  rect.exit().transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i - 1) - .5; })
      //.each('end', callback) // This only works after the first transition so using it to trigger the next data point is useless
      .remove();
}

See this jsFiddle for fiddling with the code :)

It may be that I do not perfectly understand how transition() works differently on either enter() or exit() or just the selector.

Can you enlighten me?

If you can make the callback work, but doesn't solve my problem stated above (animations on browser leaving), please help me with that as well, as I'll upvote your ments/answer.

Edit:

I managed to get rid of the animation queue buildup by testing for which element the transition has ended, and only take the last one:

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

I am using a modified version of this D3 tutorial bar chart.

What is important for me is that animations should not stack upon leaving the browser window then trigger all of them when the window is in focus again, causing the browser to hang, so as per this suggestion, I'm trying to use a setTimeout instead of setInterval that should be called when the animation has ended.

I'm having problems with the callbacks and I don't understand why the simple transition() callback is working, but not the enter() for example.

After I set up the chart & scale, here's how my 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 at all

  rect.transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i) - .5; });
      //.each('end', callback); // Works but for each of the 50 elements

  rect.exit().transition()
      .duration(1000)
      .attr("x", function(d, i) { return x(i - 1) - .5; })
      //.each('end', callback) // This only works after the first transition so using it to trigger the next data point is useless
      .remove();
}

See this jsFiddle for fiddling with the code :)

It may be that I do not perfectly understand how transition() works differently on either enter() or exit() or just the selector.

Can you enlighten me?

If you can make the callback work, but doesn't solve my problem stated above (animations on browser leaving), please help me with that as well, as I'll upvote your ments/answer.

Edit:

I managed to get rid of the animation queue buildup by testing for which element the transition has ended, and only take the last one:

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

• javascript
• animation
• browser
• callback
• d3.js

1 Answer 1

Elements can only have one active transition at a time. The rect.enter().transtition() immediately gets overwritten by the rect.transition() (rect is the update selection which also contains the entering elements!). Therefore rect.enter().transition().each('end', callback) never gets called.

For more information see the API documentation on transitions or Mike's tutorial.