Событие окончания перехода d3.js

Я применяю переход к группе узлов, возвращаемых selectAll(). Я думал, что конечное событие будет срабатывать после завершения всех переходов, но each("end",function) вызывается в конце каждого перехода.

Итак, есть ли способ установить обратный вызов, который будет вызываться после переходов на всех выбранных node окончаниях?

Должен ли я использовать call для этого? но я не вижу, чтобы он использовался как конечный обратный вызов в любом месте документации.

Также я могу запустить счетчик внутри обратного вызова each. но есть ли способ узнать, сколько узлов все еще ожидает завершения перехода? или индекс текущего node в группе выбранных узлов?

У меня есть два вызова select() в цепочке, например selectAll('.partition').selectAll('.subpartition') поэтому аргумент индекса, переданный каждому обратному вызову, будет вращаться n раз.

Ответы

Ответ 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
}

Вот ссылки на соответствующую документацию:

Ответ 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!");
    });

Это будет работать, даже если переход пуст.

Ответ 3

У меня была такая же проблема

что обратный вызов выполняется с каждым элементом

Я решил, что с помощью подчеркивания один раз метод

http://underscorejs.org/#once

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