d3.js:没有为enter()调用转换回调

Question

我正在使用这个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();
      });

Answer 1

元素一次只能有一个活动转换.该rect.enter().transtition()立即得到由覆盖rect.transition()(rect是更新选择其中也包含了进入元素!).因此rect.enter().transition().each('end', callback)永远不会被召唤.

有关更多信息,请参阅有关转换的API文档或Mike的教程.