Invoquer un rappel à la fin d'une transition

Question

Je dois créer une méthode FadeOut (similaire à jQuery) en utilisant D3.js. Ce que je dois faire est de régler l'opacité sur 0 en utilisant transition() .

 d3.select("#myid").transition().style("opacity", "0");
 

Le problème est que j'ai besoin d'un rappel pour me rendre compte de la fin de la transition. Comment puis-je implémenter un rappel?

Answer 1

Vous voulez écouter de la "fin" de l'événement de la transition.

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

• Cette démo utilise la "fin" de l'événement à la chaîne un grand nombre de transitions dans l'ordre.
• Le donut exemple livré avec D3 utilise également ce pour enchaîner plusieurs transitions.
• Voici mon propre démo qui change le style des éléments au début et à la fin de la transition.

À partir de la documentation pour transition.each([type],listener):

Si le type est spécifié, ajoute un écouteur d'événements de transition, le soutien à la fois de "début" et "fin" des événements. L'auditeur sera invoquée pour chaque élément individuel dans la transition, même si la transition a un retard constant et la durée. Le début de l'événement peut être utilisé pour déclencher un changement instantané que chaque élément commence à la transition. La fin de l'événement peut être utilisé pour initier le multi-transitions de scène en sélectionnant l'élément courant, en this, et d'en déduire une nouvelle transition. Toutes les transitions créé lors de l'événement de fin de héritera de la transition actuelle de l'ID, et donc ne peut pas remplacer une nouvelle transition qui était prévu auparavant.

Voir ce fil de discussion sur le sujet pour plus de détails.

Enfin, notez que si vous voulez juste de supprimer les éléments après qu'ils ont disparu (après la transition a fini de), vous pouvez utiliser transition.remove().

Answer 2

La solution de Mike Bostock:

   function endall(transition, callback) { 
    var n = 0; 
    transition 
        .each(function() { ++n; }) 
        .each("end", function() { if (!--n) callback.apply(this, arguments); }); 
  } 

  d3.selectAll("g").transition().call(endall, function() { console.log("all done") });
 

Answer 3

Une approche légèrement différente qui fonctionne également lorsqu'il y a de nombreuses transitions avec plusieurs éléments s'exécutant simultanément:

 var transitions = 0;

d3.select("#myid").transition().style("opacity","0").each( "start", function() {
        transitions++;
    }).each( "end", function() {
        if( --transitions === 0 ) {
            callbackWhenAllIsDone();
        }
    });
 

Answer 4

En fait, il y a une autre façon de faire cela en utilisant des minuteries.

 var timer = null,
    timerFunc = function () {
      doSomethingAfterTransitionEnds();
    };

transition
  .each("end", function() {
    clearTimeout(timer);
    timer = setTimeout(timerFunc, 100);
  });