Appeler un rappel à la fin d'une transition

Je dois faire une méthode FadeOut (similaire à jQuery) en utilisant d3.js . Ce que je dois faire est de définir l'opacité sur 0 à l'aide de 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?

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

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

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

• Cette démo utilise l'événement "end" pour enchaîner plusieurs transitions dans l'ordre.
• L' exemple de beignet livré avec D3 l'utilise également pour enchaîner plusieurs transitions.
• Voici ma propre démo qui change le style des éléments au début et à la fin de la transition.

De la documentation pour transition.each([type],listener):

Si le type est spécifié, ajoute un écouteur pour les événements de transition, prenant en charge les événements de «début» et de «fin». L'auditeur sera appelé pour chaque élément individuel de la transition, même si la transition a un délai et une durée constants. L'événement de démarrage peut être utilisé pour déclencher un changement instantané lorsque chaque élément commence la transition. L'événement de fin peut être utilisé pour lancer des transitions à plusieurs étapes en sélectionnant l'élément actuel this, et en dérivant une nouvelle transition. Toutes les transitions créées lors de l'événement de fin hériteront de l'ID de transition actuel et ne remplaceront donc pas une transition plus récente qui était précédemment planifiée.

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

Enfin, notez que si vous souhaitez simplement supprimer les éléments après leur disparition (une fois la transition terminée), vous pouvez utiliser transition.remove().

La solution de Mike Bostock pour la v3 avec une petite mise à jour:

  function endall(transition, callback) { 
    if (typeof callback !== "function") throw new Error("Wrong callback in endall");
    if (transition.size() === 0) { 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") });

Désormais, dans d3 v4.0, il existe une fonction permettant d'attacher explicitement des gestionnaires d'événements aux transitions:

https://github.com/d3/d3-transition#transition_on

Pour exécuter du code lorsqu'une transition est terminée, tout ce dont vous avez besoin est:

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

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

var transitions = 0;

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

Ce qui suit est une autre version de la solution de Mike Bostock et inspirée du commentaire de @hughes à la réponse de @ kashesandr. Il effectue un seul rappel à transitionla fin.

Étant donné une dropfonction ...

function drop(n, args, callback) {
    for (var i = 0; i < args.length - n; ++i) args[i] = args[i + n];
    args.length = args.length - n;
    callback.apply(this, args);
}

... nous pouvons étendre d3comme ça:

d3.transition.prototype.end = function(callback, delayIfEmpty) {
    var f = callback, 
        delay = delayIfEmpty,
        transition = this;

    drop(2, arguments, function() {
        var args = arguments;
        if (!transition.size() && (delay || delay === 0)) { // if empty
            d3.timer(function() {
                f.apply(transition, args);
                return true;
            }, typeof(delay) === "number" ? delay : 0);
        } else {                                            // else Mike Bostock's routine
            var n = 0; 
            transition.each(function() { ++n; }) 
                .each("end", function() { 
                    if (!--n) f.apply(transition, args); 
                });
        }
    });

    return transition;
}

En tant que JSFiddle .

Utilisez transition.end(callback[, delayIfEmpty[, arguments...]]):

transition.end(function() {
    console.log("all done");
});

... ou avec un délai optionnel si transitionest vide:

transition.end(function() {
    console.log("all done");
}, 1000);

... ou avec des callbackarguments optionnels :

transition.end(function(x) {
    console.log("all done " + x);
}, 1000, "with callback arguments");

d3.transition.endappliquera le passé callbackmême avec un vide transition si le nombre de millisecondes est spécifié ou si le deuxième argument est vrai. Cela transmettra également tous les arguments supplémentaires au callback(et uniquement ces arguments). Surtout, cela n'appliquera pas par défaut le callbackif transitionest vide, ce qui est probablement une hypothèse plus sûre dans un tel cas.

Depuis D3 v5.8.0 +, il existe désormais un moyen officiel de le faire en utilisant transition.end . Les documents sont ici:

https://github.com/d3/d3-transition#transition_end

Un exemple de travail de Bostock est ici:

https://observablehq.com/@d3/transition-end

Et l'idée de base est que rien qu'en ajoutant .end(), la transition renverra une promesse qui ne se résoudra pas tant que tous les éléments n'auront pas terminé la transition:

 await d3.selectAll("circle").transition()
      .duration(1000)
      .ease(d3.easeBounce)
      .attr("fill", "yellow")
      .attr("cx", r)
    .end();

Pour en savoir plus, consultez les notes de version de la version:

https://github.com/d3/d3/releases/tag/v5.8.0

La solution de Mike Bostock améliorée par kashesandr + passant des arguments à la fonction de rappel:

function d3_transition_endall(transition, callback, arguments) {
    if (!callback) callback = function(){};
    if (transition.size() === 0) {
        callback(arguments);
    }

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

function callback_function(arguments) {
        console.log("all done");
        console.log(arguments);
}

d3.selectAll("g").transition()
    .call(d3_transition_endall, callback_function, "some arguments");

En fait, il existe 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);
  });

J'ai résolu un problème similaire en définissant une durée sur les transitions à l'aide d'une variable. Ensuite, setTimeout()j'appelais la fonction suivante. Dans mon cas, je voulais un léger chevauchement entre la transition et le prochain appel, comme vous le verrez dans mon exemple:

var transitionDuration = 400;

selectedItems.transition().duration(transitionDuration).style("opacity", .5);

setTimeout(function () {
  sortControl.forceSort();
}, (transitionDuration * 0.75));