.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");
  }
}

在这里完成演示。请注意，在第一组完成后要运行另一个转换的特殊情况下，您可以.transition()再次使用。