Question

我正在使用此D3 tutorial bar chart的修改版本。

对我来说重要的是动画不应该在离开浏览器窗口时叠加，然后在窗口再次聚焦时触发所有动画，导致浏览器挂起，因此按照this suggestion，我是尝试使用动画结束时应调用的setTimeout代替setInterval。

我遇到了回调问题，我不明白为什么简单的transition()回调有效，但不是enter()。

我设置图表＆amp; scale，这是我的初始化函数的样子：

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

请参阅this jsFiddle以了解代码：）

我可能并不完全理解transition()或enter()或exit()或{/ p>}的rect.transition() .duration(1000) .attr("x", function(d, i) { return x(i) - .5; }) .each('end', function(d, i){ if(i == 49) callback(); });工作方式有何不同。

你能开导我吗？

如果您可以使回调工作，但无法解决我上面提到的问题（浏览器离开时的动画），请帮助我，因为我会提出您的意见/答案。

修改：

我设法通过测试过渡结束的元素来摆脱动画队列的建立，只采取最后一个：

{{1}}

Answer 1

元素一次只能有一个活动转换。 rect.enter().transtition()会立即覆盖rect.transition()（rect是更新选择，其中还包含输入元素！）。因此rect.enter().transition().each('end', callback)永远不会被调用。

有关详细信息，请参阅API documentation on transitions或Mike's tutorial。

d3.js：没有为enter（）调用转换回调

1 个答案: