Panggil panggilan balik di akhir transisi

Saya perlu membuat metode FadeOut (mirip dengan jQuery) menggunakan D3.js . Yang perlu saya lakukan adalah mengatur opacity menjadi 0 menggunakan transition().

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

Masalahnya adalah saya memerlukan panggilan balik untuk menyadari ketika transisi telah selesai. Bagaimana cara menerapkan callback?

Anda ingin mendengarkan acara "akhir" dari transisi.

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

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

• Demo ini menggunakan acara "akhir" untuk merangkai banyak transisi secara berurutan.
• Contoh donat yang dikirimkan dengan D3 juga menggunakan ini untuk menyatukan beberapa transisi.
• Inilah demo saya sendiri yang mengubah gaya elemen di awal dan akhir transisi.

Dari dokumentasi untuk transition.each([type],listener):

Jika jenisnya ditentukan, tambahkan listener untuk peristiwa transisi, yang mendukung peristiwa "mulai" dan "akhir". Listener akan dipanggil untuk setiap elemen individu dalam transisi, meskipun transisi memiliki penundaan dan durasi yang konstan. Peristiwa awal dapat digunakan untuk memicu perubahan seketika saat setiap elemen mulai melakukan transisi. Acara akhir dapat digunakan untuk memulai transisi multi-tahap dengan memilih elemen saat ini this, dan mendapatkan transisi baru. Setiap transisi yang dibuat selama acara akhir akan mewarisi ID transisi saat ini, sehingga tidak akan menimpa transisi yang lebih baru yang telah dijadwalkan sebelumnya.

Lihat utas forum ini tentang topik untuk lebih jelasnya.

Terakhir, perhatikan bahwa jika Anda hanya ingin menghapus elemen setelah memudar (setelah transisi selesai), Anda dapat menggunakan transition.remove().

Solusi Mike Bostock untuk v3 dengan pembaruan kecil:

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

Sekarang, di d3 v4.0, ada fasilitas untuk secara eksplisit melampirkan event handler ke transisi:

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

Untuk mengeksekusi kode ketika transisi telah selesai, yang Anda butuhkan hanyalah:

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

Pendekatan yang sedikit berbeda yang juga berfungsi saat ada banyak transisi dengan banyak elemen yang masing-masing berjalan secara bersamaan:

var transitions = 0;

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

Berikut ini adalah versi lain dari solusi Mike Bostock dan terinspirasi oleh komentar @hughes untuk jawaban @ kashesandr. Itu membuat panggilan balik tunggal transitiondi akhir.

Diberikan dropfungsi ...

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

... kita dapat memperpanjang d3seperti ini:

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

Sebagai JSFiddle .

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

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

... atau dengan penundaan opsional jika transitionkosong:

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

... atau dengan callbackargumen opsional :

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

d3.transition.endakan menerapkan lulus callbackbahkan dengan kosong transition jika jumlah milidetik ditentukan atau jika argumen kedua benar. Ini juga akan meneruskan argumen tambahan apa pun ke callback(dan hanya argumen itu). Yang penting, ini tidak akan secara default menerapkan callbackjika transitionkosong, yang mungkin merupakan asumsi yang lebih aman dalam kasus seperti itu.

Mulai D3 v5.8.0 +, sekarang ada cara resmi untuk melakukan ini menggunakan transition.end . Dokumennya ada di sini:

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

Contoh kerja dari Bostock ada di sini:

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

Dan ide dasarnya adalah hanya dengan menambahkan .end(), transisi akan mengembalikan janji yang tidak akan terselesaikan hingga semua elemen selesai ditransisikan:

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

Lihat catatan rilis versi untuk lebih banyak lagi:

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

Solusi Mike Bostock ditingkatkan dengan kashesandr + meneruskan argumen ke fungsi callback:

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

Sebenarnya ada satu cara lagi untuk melakukan ini menggunakan pengatur waktu.

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

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

Saya memecahkan masalah serupa dengan mengatur durasi transisi menggunakan variabel. Kemudian saya biasa setTimeout()memanggil fungsi selanjutnya. Dalam kasus saya, saya ingin sedikit tumpang tindih antara transisi dan panggilan berikutnya, seperti yang akan Anda lihat dalam contoh saya:

var transitionDuration = 400;

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

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