d3.js转换结束事件 [英] d3.js transition end event

问题描述

我将转换应用于 selectAll（）返回的一组节点。我认为结束事件将在所有转换完成后触发，但每个转换结束时调用（end，function）。

I am applying a transition to a group of nodes returned by selectAll(). I thought the end event would fire after all transitions finished, but each("end",function) gets called at the end of each transition.

那么是否有任何方法可以设置一个回调，在所有选定节点完成转换之后调用它？

So is there any way to set a callback that will be called after transitions on all selected node finishes ?

我应该使用调用吗？但我没有看到它用作文档中任何地方的回调。

Should I use call for this? but I don't see it used as end callback anywhere in documentation.

也可以在中运行一个计数器回调。但是有什么办法知道有多少节点还在等待完成转换？或者在所选节点组中的当前节点的索引？

also I can run a counter inside each callback. but is there any way to know how many nodes are still pending to finish transition ? or index of current node in group of selected nodes ?

我在链中有两个select（）调用像 selectAll .selectAll（'。subpartition'）
因此传递给每个回调的索引参数将旋转n次。

I've two select() calls in chain like selectAll('.partition').selectAll('.subpartition') so index argument passed to each callback will rotated n times.

推荐答案

据我所知，没有内置的方式来知道一个组的最后一次转换已经完成，但有方法。我已经使用过几次的一种方法涉及保持已完成的转换计数。

As far as I know there is not a built in way to know when the last transition of a group has finished but there are ways around it. One way that I have used several times involves maintaining a count of transitions that have finished.

var n = 0;

d3.selectAll('div')
   .each(function() { // I believe you could do this with .on('start', cb) but I haven't tested it
       n++;
   })
   .transition()
   .on('end', function() { // use to be .each('end', function(){})
       n--;
       if (!n) {
           endall();
       }
   })

function endall() {
    // your end function here
}

是相关文档的链接：

• https://github.com/d3/d3-transition#control-flow


• https://github.com/d3/d3-transition#the-life-of-a-transition

• https://github.com/d3/d3-transition#control-flow
• https://github.com/d3/d3-transition#the-life-of-a-transition

这篇关于d3.js转换结束事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！