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

admin管理员组

文章数量:1430346

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

Share Improve this question Follow edited May 23, 2017 at 12:17 CommunityBot 111 silver badge asked May 9, 2013 at 20:03 CristianCristian 6,09566 gold badges4848 silver badges5757 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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.

本文标签： javascriptd3js Transition callback is not called for enter()Stack Overflow