d3.js:转换回调不会被enter()调用

我使用的是D3教程条形图的修改版本。

对我来说重要的是动画不应该在离开浏览器窗口时堆叠，然后在窗口再次聚焦时触发所有这些，导致浏览器挂起，所以根据这个建议，我试图使用setTimeout而不是setInterval，应该在动画结束时调用。

我有回调的问题，我不明白为什么简单的transition()回调工作，但不是enter()为例。

在我设置好图表&缩放，我的初始化函数是这样的:

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();
}

查看这个jsFiddle来摆弄代码:)

可能是我不完全理解transition()在enter()或exit()或选择器上的工作方式不同。

你能开导我吗?

如果你可以使回调工作，但不能解决我上面提到的问题(浏览器离开时的动画)，请帮助我，因为我会投票你的评论/答案。

编辑:

我通过测试过渡结束的元素来摆脱动画队列的堆积，并且只取最后一个:

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