d3.js - d3.js 过渡结束事件

Question

我正在对一组返回的节点应用过渡selectAll()。我认为结束事件会在所有转换完成后触发，但each("end",function)在每次转换结束时被调用。

那么有没有办法设置一个回调，在所有选定节点的转换完成后调用？

我应该用call这个吗？但我没有看到它在文档中的任何地方用作结束回调。

each我也可以在回调中运行一个计数器。但是有没有办法知道有多少节点仍在等待完成过渡？或选定节点组中当前节点的索引？

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

Answer 1

据我所知，没有内置方法可以知道组的最后一次转换何时完成，但有一些方法可以解决它。我多次使用的一种方法是维护已完成的转换计数。

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

Answer 2

这是完成您想要的事情的一种干净的方法：

function endAll (transition, callback) {
    var n;

    if (transition.empty()) {
        callback();
    }
    else {
        n = transition.size();
        transition.each("end", function () {
            n--;
            if (n === 0) {
                callback();
            }
        });
    }
}

然后，您可以像这样轻松调用此函数：

selection.transition()
    .call(endAll, function () {
        console.log("All the transitions have ended!");
    });

即使转换为空，这也将起作用。

Answer 3

我遇到过同样的问题

每个元素都会执行回调

我已经解决了使用下划线一次的方法

http://underscorejs.org/#once

d3.select("#myid")
.transition()
.style("opacity","0")
.each("end", _.once(myCallback) );