evento final de transición d3.js

transition

Question

Estoy aplicando una transición a un grupo de nodos devueltos por selectAll() . Pensé que el evento final se activaría después de que todas las transiciones finalizaran, pero each("end",function) se ejecuta al final de cada transición.

Entonces, ¿hay alguna forma de establecer una devolución de llamada que se llame después de que finalicen las transiciones en todos los nodos seleccionados?

¿Debo usar la call para esto? pero no veo que se use como devolución de llamada final en ninguna parte de la documentación.

También puedo ejecutar un contador dentro de each devolución de llamada. pero ¿hay alguna forma de saber cuántos nodos están pendientes para finalizar la transición? ¿O índice del nodo actual en el grupo de nodos seleccionados?

Tengo dos llamadas select () en cadena, como selectAll(''.partition'').selectAll(''.subpartition'') por lo que el argumento de índice pasado a cada devolución de llamada se rotará n veces.

Answer 1

Aquí hay una manera limpia de lograr lo que quieres:

function endAll (transition, callback) {
    var n;

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

Entonces puedes fácilmente llamar a esta función así:

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

Esto funcionará incluso si la transición está vacía.

Answer 2

Por lo que sé, no hay una forma integrada de saber cuándo ha finalizado la última transición de un grupo, pero hay formas de evitarlo. Una forma que he usado varias veces es mantener un recuento de las transiciones que han finalizado.

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
}

Aquí están los enlaces a la documentación relevante:

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

Answer 3

Tuve el mismo problema

Que la llamada se ejecute con cada elemento.

He resuelto que usando el método de subrayado una vez

http://underscorejs.org/#once

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