Wywołaj wywołanie zwrotne na końcu przejścia

Muszę zrobić Fadeout metodę podobną do jQuery () używając D3.js . To, co muszę zrobić, to ustawić krycie na 0 za pomocą transition().

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

Problem polega na tym, że potrzebuję oddzwonienia, aby dowiedzieć się, kiedy przejście się zakończy. Jak mogę zaimplementować wywołanie zwrotne?

Chcesz nasłuchiwać zdarzenia „końca” przejścia.

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

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

• To demo wykorzystuje zdarzenie „end” do połączenia wielu przejść w określonej kolejności.
• Przykład pączek , że statki z D3 również używa tego do łańcucha razem wiele przejść.
• Oto moje własne demo , który zmienia styl elementów na początku i na końcu przejścia.

Z dokumentacji transition.each([type],listener):

Jeśli określono typ , dodaje detektor zdarzeń przejścia, obsługujący zarówno zdarzenia „start”, jak i „end”. Odbiornik zostanie wywołany dla każdego elementu przejścia, nawet jeśli przejście ma stałe opóźnienie i czas trwania. Zdarzenie początkowe może służyć do wywołania natychmiastowej zmiany, gdy każdy element zaczyna się zmieniać. Zdarzenie końcowe można wykorzystać do zainicjowania przejść wieloetapowych przez wybranie bieżącego elementu thisi wyprowadzenie nowego przejścia. Wszelkie przejścia utworzone podczas zdarzenia końcowego odziedziczą bieżący identyfikator przejścia, a zatem nie zastąpią nowszego przejścia, które było wcześniej zaplanowane.

Więcej informacji znajdziesz w tym wątku na forum na ten temat .

Na koniec zwróć uwagę, że jeśli chcesz po prostu usunąć elementy po ich wyblaknięciu (po zakończeniu przejścia), możesz użyć transition.remove().

Mike Bostock za rozwiązaniem dla v3 z małą aktualizację:

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

Teraz w d3 v4.0 istnieje możliwość jawnego dołączania programów obsługi zdarzeń do przejść:

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

Aby wykonać kod po zakończeniu przejścia, potrzebujesz tylko:

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

Nieco inne podejście, które działa również w przypadku wielu przejść, z których każdy działa jednocześnie:

var transitions = 0;

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

Poniżej znajduje się kolejna wersja Mike'a Bostocka roztworze i zainspirowany komentarzem @hughes' do użytkownika @ kashesandr odpowiedź. Wykonuje pojedyncze wywołanie zwrotne po transitionzakończeniu.

Dawać drop funkcję ...

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

... możemy przedłużyć d3 sposób:

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

Jako JSFiddle .

Posługiwać się transition.end(callback[, delayIfEmpty[, arguments...]]) :

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

... lub z opcjonalnym opóźnieniem, jeśli transition jest pusty:

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

... lub z opcjonalnymi callbackargumentami:

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

d3.transition.endzastosuje przekazaną wartość callbacknawet z pustą wartością, transition jeśli podano liczbę milisekund lub jeśli drugi argument jest prawdziwy. Spowoduje to również przekazanie wszelkich dodatkowych argumentów do callback(i tylko tych argumentów). Co ważne, domyślnie nie będzie to miało zastosowania, callbackjeśli if transitionjest puste, co jest prawdopodobnie bezpieczniejszym założeniem w takim przypadku.

Od wersji D3 w wersji 5.8.0 + jest teraz oficjalny sposób na zrobienie tego za pomocą transition.end . Dokumenty są tutaj:

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

Przykład roboczy firmy Bostock jest tutaj:

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

Podstawową ideą jest to, że samo dołączenie .end()przejścia zwróci obietnicę, która nie zostanie rozwiązana, dopóki wszystkie elementy nie zostaną zakończone:

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

Zobacz informacje o wydaniu wersji, aby dowiedzieć się więcej:

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

Rozwiązanie Mike'a Bostocka ulepszone przez kashesandr + przekazanie argumentów do funkcji zwrotnej:

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

Właściwie jest jeszcze jeden sposób na zrobienie tego za pomocą timerów.

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

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

Rozwiązałem podobny problem, ustawiając czas trwania przejść za pomocą zmiennej. Następnie setTimeout()wywoływałem następną funkcję. W moim przypadku chciałem, aby przejście między przejściem a następnym połączeniem nieznacznie się pokrywało, jak zobaczysz w moim przykładzie:

var transitionDuration = 400;

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

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