เรียกใช้การโทรกลับเมื่อสิ้นสุดการเปลี่ยนแปลง

ฉันต้องการที่จะทำให้วิธีการ fadeOut (คล้ายกับ jQuery) โดยใช้D3.js สิ่งที่ฉันต้องการจะทำคือการตั้งค่าความทึบเป็น 0 transition()โดยใช้

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

ปัญหาคือฉันต้องการการติดต่อกลับเพื่อให้ทราบเมื่อการเปลี่ยนแปลงเสร็จสิ้น ฉันจะใช้การโทรกลับได้อย่างไร

คุณต้องการฟังเหตุการณ์ "สิ้นสุด" ของการเปลี่ยนแปลง

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

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

• การสาธิตนี้ใช้เหตุการณ์ "สิ้นสุด" เพื่อเชื่อมโยงการเปลี่ยนหลายครั้งตามลำดับ
• ตัวอย่างเช่นโดนัทที่มาพร้อมกับ D3 ยังใช้นี้เพื่อเปลี่ยนโซ่ด้วยกันหลาย
• นี่คือการสาธิตของฉันเองที่เปลี่ยนรูปแบบขององค์ประกอบในช่วงเริ่มต้นและจุดสิ้นสุดของการเปลี่ยนแปลง

จากเอกสารสำหรับtransition.each([type],listener):

หากระบุประเภทไว้ให้เพิ่ม Listener สำหรับเหตุการณ์การเปลี่ยนแปลงโดยรองรับทั้งเหตุการณ์ "start" และ "end" ผู้ฟังจะถูกเรียกใช้สำหรับแต่ละองค์ประกอบในการเปลี่ยนแม้ว่าการเปลี่ยนแปลงจะมีความล่าช้าและระยะเวลาคงที่ เหตุการณ์เริ่มต้นสามารถใช้เพื่อทริกเกอร์การเปลี่ยนแปลงทันทีเมื่อแต่ละองค์ประกอบเริ่มเปลี่ยน เหตุการณ์สิ้นสุดสามารถใช้เพื่อเริ่มการเปลี่ยนหลายขั้นตอนโดยการเลือกองค์ประกอบปัจจุบันthisและรับการเปลี่ยนแปลงใหม่ การเปลี่ยนใด ๆ ที่สร้างขึ้นระหว่างเหตุการณ์สิ้นสุดจะสืบทอด ID การเปลี่ยนแปลงปัจจุบันและจะไม่แทนที่การเปลี่ยนแปลงที่ใหม่กว่าที่กำหนดไว้ก่อนหน้านี้

ดูหัวข้อฟอรัมนี้ในหัวข้อสำหรับรายละเอียดเพิ่มเติม

สุดท้ายโปรดทราบว่าหากคุณต้องการลบองค์ประกอบหลังจากที่มันจางหายไป (หลังจากการเปลี่ยนเสร็จสิ้น) คุณสามารถtransition.remove()ใช้ได้

โซลูชันของ Mike Bostock สำหรับv3พร้อมการอัปเดตขนาดเล็ก:

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

ตอนนี้ใน d3 v4.0 มีสิ่งอำนวยความสะดวกสำหรับการแนบตัวจัดการเหตุการณ์อย่างชัดเจนกับการเปลี่ยน:

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

ในการรันโค้ดเมื่อการเปลี่ยนแปลงเสร็จสิ้นสิ่งที่คุณต้องมีคือ:

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

วิธีการที่แตกต่างกันเล็กน้อยซึ่งใช้ได้ผลเมื่อมีการเปลี่ยนหลายครั้งโดยแต่ละองค์ประกอบทำงานพร้อมกัน:

var transitions = 0;

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

ต่อไปนี้เป็นโซลูชันของ Mike Bostock อีกเวอร์ชันหนึ่งและได้รับแรงบันดาลใจจากความคิดเห็นของ @hughes ถึงคำตอบของ @ kashesandr ทำให้การโทรกลับเพียงครั้งเดียวเมื่อtransitionสิ้นสุด

ให้dropฟังก์ชั่น ...

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

... เราสามารถขยายได้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

ใช้transition.end(callback[, delayIfEmpty[, arguments...]]):

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

... หรือด้วยการหน่วงเวลาหากtransitionว่างเปล่า:

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

... หรือมีcallbackข้อโต้แย้งเพิ่มเติม:

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

d3.transition.endจะใช้การส่งผ่านcallbackแม้ว่าจะว่างเปล่าtransition หากระบุจำนวนมิลลิวินาทีหรือถ้าอาร์กิวเมนต์ที่สองเป็นจริง นอกจากนี้ยังจะส่งต่ออาร์กิวเมนต์เพิ่มเติมไปยังcallback(และเฉพาะอาร์กิวเมนต์เหล่านั้น) ที่สำคัญโดยค่าเริ่มต้นจะไม่ใช้callbackif transitionว่างซึ่งอาจเป็นข้อสันนิษฐานที่ปลอดภัยกว่าในกรณีเช่นนี้

สำหรับ D3 v5.8.0 + ตอนนี้มีวิธีอย่างเป็นทางการในการทำสิ่งนี้โดยใช้transition.end. เอกสารอยู่ที่นี่:

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

ตัวอย่างการทำงานจาก Bostock อยู่ที่นี่:

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

และแนวคิดพื้นฐานก็คือเพียงแค่ต่อท้าย.end()การเปลี่ยนแปลงจะส่งคืนสัญญาที่จะไม่แก้ไขจนกว่าองค์ประกอบทั้งหมดจะเสร็จสิ้นการเปลี่ยนแปลง:

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

ดูบันทึกประจำรุ่นสำหรับข้อมูลเพิ่มเติม:

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

โซลูชันของ Mike Bostock ได้รับการปรับปรุงโดยkashesandr + ส่งผ่านอาร์กิวเมนต์ไปยังฟังก์ชันเรียกกลับ:

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

จริงๆแล้วมีอีกวิธีหนึ่งในการทำเช่นนี้โดยใช้ตัวจับเวลา

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

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

ฉันแก้ไขปัญหาที่คล้ายกันโดยกำหนดระยะเวลาในการเปลี่ยนโดยใช้ตัวแปร จากนั้นฉันใช้setTimeout()เพื่อเรียกใช้ฟังก์ชันถัดไป ในกรณีของฉันฉันต้องการให้มีการทับซ้อนกันเล็กน้อยระหว่างการเปลี่ยนแปลงและการโทรครั้งต่อไปดังที่คุณจะเห็นในตัวอย่างของฉัน:

var transitionDuration = 400;

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

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