Javascript d3.js:enter（）未调用转换回调

我使用的是这个的修改版本

对我来说重要的是，动画不应在离开浏览器窗口时堆叠，然后在窗口再次聚焦时触发所有动画，导致浏览器挂起，因此，根据，我尝试使用

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

请参阅，以了解如何修改代码：）

这可能是因为我不完全理解

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

元素一次只能有一个活动转换。

rect.enter（）.transtition（）

立即被

rect.transition（）

覆盖（

rect

是更新选择，其中也包含输入元素！）。因此，

rect.enter（）.transition（）。每个（'end'，callback）

永远不会被调用

有关详细信息，请参阅或。

元素一次只能有一个活动转换。

rect.enter（）.transtition（）

立即被

rect.transition（）

覆盖（

rect

是更新选择，其中也包含输入元素！）。因此，

rect.enter（）.transition（）。每个（'end'，callback）

永远不会被调用

---

有关更多信息，请参阅or。

这是有意义的，但让我困惑的是，

attr（“x”，函数..）

在

enter（）

按预期触发后，如果我在函数中放置

console.log

，则会触发50次。但不是结束回调。另外，您的回答可能意味着教程的代码有错误。

rect.enter（）.attr（“x”，…）

与

rect.enter（）.transition（）.attr（“x”，…）

不同。但奇怪的是，每次调用

.attr（“x”，…）

都会运行。我的猜测是

rect.enter（）.transition（）

启动并随后被

rect.transition（）

取消。因此，将调用每个

.attr（“x”，…）

，但enter选择上的

.each（“end”，…）

不会调用。为了避免混淆，只需删除enter转换。没有它，代码运行得非常好。如果您想为enter和update设置不同的转换，请在enter转换之前指定更新转换。然后应该有人更新本教程，编写两次转换是非常误导的，这是有意义的，但让我困惑的是

attr（“x”，function..）

在

enter（）之后

按预期触发，如果我在函数中放置

控制台.log

，则会触发50次。但不是结束回调。另外，您的回答可能意味着教程的代码有错误。

rect.enter（）.attr（“x”，…）

与

rect.enter（）.transition（）.attr（“x”，…）

不同。但奇怪的是，每次调用

.attr（“x”，…）

都会运行。我的猜测是

rect.enter（）.transition（）

启动并随后被

rect.transition（）

取消。因此，将调用每个

.attr（“x”，…）

，但enter选择上的

.each（“end”，…）

不会调用。为了避免混淆，只需删除enter转换。没有它，代码运行得非常好。如果您想在enter和update中有不同的转换，请在enter转换之前指定update转换。然后应该有人更新本教程，编写两次转换会产生误导