Invoque um retorno de chamada no final de uma transição

Eu preciso fazer um método FadeOut (semelhante ao jQuery) usando D3.js . O que preciso fazer é definir a opacidade para 0 usando transition().

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

O problema é que preciso de um retorno de chamada para saber quando a transição for concluída. Como posso implementar um retorno de chamada?

Você deseja ouvir o evento de "fim" da transição.

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

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

• Esta demonstração usa o evento "final" para encadear muitas transições em ordem.
• O exemplo de rosca que acompanha o D3 também usa isso para encadear várias transições.
• Aqui está minha própria demonstração que muda o estilo dos elementos no início e no final da transição.

Da documentação para transition.each([type],listener):

Se o tipo for especificado, adiciona um ouvinte para eventos de transição, suportando eventos de "início" e "término". O ouvinte será chamado para cada elemento individual na transição, mesmo se a transição tiver um atraso e uma duração constantes. O evento de início pode ser usado para acionar uma mudança instantânea conforme cada elemento começa a fazer a transição. O evento final pode ser usado para iniciar transições de vários estágios selecionando o elemento atual this, e derivando uma nova transição. Todas as transições criadas durante o evento de término herdarão o ID de transição atual e, portanto, não substituirão uma transição mais recente que foi agendada anteriormente.

Veja este tópico do fórum sobre o tópico para mais detalhes.

Finalmente, observe que se você quiser apenas remover os elementos depois que eles desaparecerem (após o término da transição), você pode usar transition.remove().

Solução de Mike Bostock para v3 com uma pequena atualização:

  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") });

Agora, no d3 v4.0, há um recurso para anexar explicitamente manipuladores de eventos às transições:

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

Para executar o código quando uma transição for concluída, tudo que você precisa é:

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

Uma abordagem um pouco diferente que funciona também quando há muitas transições com muitos elementos, cada uma funcionando simultaneamente:

var transitions = 0;

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

A seguir está outra versão da solução de Mike Bostock e inspirada no comentário de @hughes à resposta de @kashesandr. Ele faz um único retorno de chamada ao transitionfinalizar.

Dada uma dropfunção ...

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);
}

... podemos estender d3assim:

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;
}

Como um JSFiddle .

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

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

... ou com um atraso opcional se transitionestiver vazio:

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

... ou com callbackargumentos opcionais :

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

d3.transition.endaplicará o passado callbackmesmo com um vazio transition se o número de milissegundos for especificado ou se o segundo argumento for verdadeiro. Isso também encaminhará quaisquer argumentos adicionais para o callback(e apenas esses argumentos). É importante notar que, por padrão , isso não se aplicará a callbackif transitionestá vazio, o que provavelmente é uma suposição mais segura nesse caso.

A partir do D3 v5.8.0 +, agora existe uma maneira oficial de fazer isso usando transition.end. Os documentos estão aqui:

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

Um exemplo prático de Bostock está aqui:

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

E a ideia básica é que apenas acrescentando .end(), a transição retornará uma promessa que não será resolvida até que todos os elementos tenham concluído a transição:

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

Consulte as notas de lançamento da versão para ainda mais:

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

A solução de Mike Bostock melhorada por kashesandr + passando argumentos para a função de retorno de chamada:

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");

Na verdade, há mais uma maneira de fazer isso usando temporizadores.

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

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

Resolvi um problema semelhante definindo uma duração nas transições usando uma variável. Então eu costumava setTimeout()chamar a próxima função. No meu caso, eu queria uma ligeira sobreposição entre a transição e a próxima chamada, como você verá no meu exemplo:

var transitionDuration = 400;

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

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