javascript - .remove() 之后的 d3 回调函数

Question

我想知道什么时候我的所有行都被删除了，这样我就可以调用另一个函数了。

svg.selectAll('line').transition().duration(2500)
    .style("stroke-opacity",0).remove();

我知道我可以在每次转换后使用 .each("end",mycallback) 运行回调，但我只想在所有转换完成后运行一次。

如果我试试这个

svg.selectAll('line').transition().duration(2500)
   .style("stroke-opacity",0).remove().call(function(){console.log("yes");});

然后 .call() 在转换完成之前发生。

我可以添加一个 window.setTimeout()，但是有正确的方法吗？

Answer 1

正确的做法是使用.each("end", callback)。正如您所指出的，转换中的每个元素都会调用一次。您无法更改此设置，但可以添加一个计数器来跟踪已删除的元素数量:

d3.selectAll("div")
  .call(setupRemove)
  .transition().duration(500)
  .each("end", onRemove)
  .remove();

function setupRemove(sel) {
  counter = sel.size();
}
function onRemove() {
  counter--;
  if(counter == 0) {
    console.log("all done");
  }
}

完整演示 here .请注意，在特殊情况下，当您希望在第一组完成后运行另一个转换时，您可以再次使用 .transition()。