Gọi lại khi kết thúc quá trình chuyển đổi

Tôi cần phải thực hiện một phương pháp fadeOut (tương tự như jQuery) sử dụng D3.js . Những gì tôi cần làm là đặt độ mờ về 0 bằng cách sử dụng transition().

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

Vấn đề là tôi cần gọi lại để nhận biết khi nào quá trình chuyển đổi đã kết thúc. Làm cách nào để triển khai một lệnh gọi lại?

Bạn muốn lắng nghe sự kiện "kết thúc" của quá trình chuyển đổi.

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

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

• Bản demo này sử dụng sự kiện "kết thúc" để xâu chuỗi nhiều quá trình chuyển đổi theo thứ tự.
• Các ví dụ donut mà tàu với D3 cũng sử dụng này để chuỗi lại với nhau nhiều hiệu ứng chuyển tiếp.
• Đây là bản trình diễn của riêng tôi thay đổi kiểu của các phần tử khi bắt đầu và kết thúc quá trình chuyển đổi.

Từ tài liệu cho transition.each([type],listener):

Nếu loại được chỉ định, hãy thêm trình nghe cho các sự kiện chuyển tiếp, hỗ trợ cả sự kiện "bắt đầu" và "kết thúc". Người nghe sẽ được gọi cho từng phần tử riêng lẻ trong quá trình chuyển đổi, ngay cả khi quá trình chuyển đổi có độ trễ và thời lượng liên tục. Sự kiện bắt đầu có thể được sử dụng để kích hoạt thay đổi tức thời khi mỗi phần tử bắt đầu chuyển đổi. Sự kiện kết thúc có thể được sử dụng để bắt đầu chuyển đổi nhiều giai đoạn bằng cách chọn phần tử hiện tại thisvà tạo ra một chuyển đổi mới. Mọi chuyển đổi được tạo trong sự kiện kết thúc sẽ kế thừa ID chuyển đổi hiện tại và do đó sẽ không ghi đè quá trình chuyển đổi mới hơn đã được lên lịch trước đó.

Xem chuỗi diễn đàn này về chủ đề để biết thêm chi tiết.

Cuối cùng, lưu ý rằng nếu bạn chỉ muốn xóa các phần tử sau khi chúng đã mờ đi (sau khi quá trình chuyển đổi kết thúc), bạn có thể sử dụng transition.remove().

Giải pháp của Mike Bostock cho v3 với một bản cập nhật nhỏ:

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

Bây giờ, trong d3 v4.0, có một cơ sở để gắn các trình xử lý sự kiện một cách rõ ràng vào các chuyển tiếp:

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

Để thực thi mã khi quá trình chuyển đổi hoàn tất, tất cả những gì bạn cần là:

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

Một cách tiếp cận hơi khác cũng hoạt động khi có nhiều chuyển tiếp với nhiều phần tử chạy đồng thời:

var transitions = 0;

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

Sau đây là một phiên bản khác của giải pháp của Mike Bostock và được truyền cảm hứng từ nhận xét của @hughes cho câu trả lời của @ kashandr. Nó thực hiện một cuộc gọi lại duy nhất khi transitionkết thúc.

Cho một drophàm ...

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

... chúng tôi có thể mở rộng d3như vậy:

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

Là một JSFiddle .

Sử dụng transition.end(callback[, delayIfEmpty[, arguments...]]):

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

... hoặc với độ trễ tùy chọn nếu transitiontrống:

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

... hoặc với các callbackđối số tùy chọn :

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

d3.transition.endsẽ áp dụng giá trị được truyền callbackngay cả với giá trị trống transition nếu số mili giây được chỉ định hoặc nếu đối số thứ hai là đúng. Điều này cũng sẽ chuyển tiếp bất kỳ đối số bổ sung nào đến callback(và chỉ những đối số đó). Quan trọng hơn, điều này sẽ không theo mặc định áp dụng callbacknếu transitionlà trống rỗng, mà có lẽ là một giả định an toàn trong trường hợp này.

Kể từ D3 v5.8.0 +, hiện đã có một cách chính thức để thực hiện việc này bằng cách sử dụng transition.end. Các tài liệu ở đây:

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

Một ví dụ làm việc từ Bostock là ở đây:

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

Và ý tưởng cơ bản là chỉ cần thêm bớt .end(), quá trình chuyển đổi sẽ trả về một lời hứa sẽ không giải quyết cho đến khi tất cả các yếu tố được thực hiện chuyển đổi:

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

Xem ghi chú phát hành phiên bản để biết thêm:

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

Giải pháp của Mike Bostock được cải thiện bằng cách kashandr + chuyển đối số vào hàm gọi lại:

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

Trên thực tế, có một cách nữa để làm điều này bằng cách sử dụng bộ hẹn giờ.

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

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

Tôi đã giải quyết một vấn đề tương tự bằng cách đặt thời lượng chuyển tiếp bằng một biến. Sau đó, tôi sử dụng setTimeout()để gọi chức năng tiếp theo. Trong trường hợp của tôi, tôi muốn có một chút trùng lặp giữa quá trình chuyển đổi và cuộc gọi tiếp theo, như bạn sẽ thấy trong ví dụ của tôi:

var transitionDuration = 400;

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

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