Bir geçişin sonunda bir geri arama çağırın

D3.js kullanarak bir FadeOut yöntemi (jQuery'ye benzer) yapmam gerekiyor . Yapmam gereken, kullanarak opaklığı 0 olarak ayarlamaktır transition().

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

Sorun şu ki, geçişin ne zaman bittiğini anlamak için bir geri aramaya ihtiyacım var. Geri aramayı nasıl uygulayabilirim?

Geçişin "son" olayını dinlemek istiyorsunuz.

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

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

• Bu demo , sırayla birçok geçişi zincirlemek için "son" olayını kullanır.
• Halka, örneğin D3 ile birlikte, aynı zamanda birlikte zincire birden fazla geçiş kullanır.
• İşte geçişin başında ve sonunda öğelerin stilini değiştiren kendi demom .

Belgelerden transition.each([type],listener):

Eğer tip belirtilirse, hem "start" ve "son" olayları destekleyen, geçiş olayları için bir dinleyici ekler. Dinleyici, geçişin sabit bir gecikmesi ve süresi olsa bile geçişteki her bir öğe için çağrılacaktır. Başlangıç ​​olayı, her öğe geçiş yapmaya başladığında anlık bir değişikliği tetiklemek için kullanılabilir. Bitiş olayı, mevcut öğeyi seçerek thisve yeni bir geçiş türeterek çok aşamalı geçişleri başlatmak için kullanılabilir . Bitiş etkinliği sırasında oluşturulan tüm geçişler, mevcut geçiş kimliğini devralacak ve bu nedenle, önceden planlanmış daha yeni bir geçişi geçersiz kılmayacaktır.

Daha fazla ayrıntı için konuyla ilgili bu forum başlığına bakın.

Son olarak, öğeleri soluklaştıktan sonra kaldırmak istiyorsanız (geçiş bittikten sonra), kullanabileceğinizi unutmayın transition.remove().

Mike Bostock'un küçük bir güncellemeyle v3 için çözümü :

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

Şimdi, d3 v4.0'da, olay işleyicilerini geçişlere açıkça eklemek için bir olanak vardır:

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

Bir geçiş tamamlandığında kodu yürütmek için ihtiyacınız olan tek şey:

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

Her biri aynı anda çalışan birçok öğeye sahip birçok geçiş olduğunda da işe yarayan biraz farklı bir yaklaşım:

var transitions = 0;

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

Aşağıdaki, Mike Bostock'un çözümünün başka bir versiyonudur ve @hughes'in @ kashesandr'ın cevabına yaptığı yorumdan esinlenmiştir. Sonunda tek bir geri arama yapar transition.

Bir dropişlev verildiğinde ...

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

... şu şekilde uzatabiliriz d3:

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

JSFiddle olarak .

Kullanım transition.end(callback[, delayIfEmpty[, arguments...]]):

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

... veya transitionboşsa isteğe bağlı bir gecikmeyle :

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

... veya isteğe bağlı callbackbağımsız değişkenlerle:

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

d3.transition.endmilisaniye sayısı belirtilmişse veya ikinci bağımsız değişken doğruysa , geçen değeri callbackboş transition olsa bile uygular. Bu ayrıca herhangi bir ek argümanı (ve yalnızca bu argümanlara) iletecektir . Daha da önemlisi, bu varsayılan olarak if boştur ifadesini uygulamayacaktır , bu muhtemelen böyle bir durumda daha güvenli bir varsayımdır.callbackcallbacktransition

D3 v5.8.0 + 'dan itibaren, bunu kullanarak yapmanın resmi bir yolu var. transition.end . Dokümanlar burada:

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

Bostock'tan çalışan bir örnek burada:

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

Ve temel fikir, .end()geçişin, tüm unsurların geçişi tamamlanana kadar çözülmeyecek bir söz vereceğidir:

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

Daha da fazlası için sürüm yayın notlarına bakın:

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

Mike Bostock'un çözümü , kashesandr + geri arama işlevine argümanlar ileterek iyileştirildi :

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

Aslında bunu zamanlayıcı kullanarak yapmanın bir yolu daha var.

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

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

Değişken kullanarak geçişler için bir süre belirleyerek benzer bir sorunu çözdüm. Sonra bir setTimeout()sonraki işlevi çağırırdım. Benim durumumda, örneğimde göreceğiniz gibi, geçiş ile sonraki arama arasında hafif bir örtüşme olmasını istedim:

var transitionDuration = 400;

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

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