Викликати зворотний виклик в кінці переходу

Мені потрібно зробити метод 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):

Якщо тип вказаний, додається слухач для подій переходу, підтримуючи події "старту" та "кінця". Слухач буде викликати кожен окремий елемент переходу, навіть якщо перехід має постійну затримку та тривалість. Подія запуску може використовуватися для запуску миттєвої зміни, коли кожен елемент починає переходити. Кінцева подія може бути використана для ініціювання багатоступеневих переходів шляхом вибору поточного елемента thisта отримання нового переходу. Будь-які переходи, створені під час кінцевої події, успадкують поточний ідентифікатор переходу і, таким чином, не замінять новий перехід, який був запланований раніше.

Детальніше про це див. У цій темі на форумі .

Нарешті, зауважте, що якщо ви просто хочете видалити елементи після їх вицвітання (після завершення переходу), ви можете використовувати transition.remove().

Рішення Майка Бостока для 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();
        }
    });

Нижче ще одна версія Майка Босток в розчині і натхненний коментар @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 if transitionпорожній, що, мабуть, є більш безпечним припущенням у такому випадку.

Станом на D3 v5.8.0 +, зараз існує офіційний спосіб зробити це за допомогою transition.end. Документи тут:

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

Робочий приклад з Бостока тут:

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

Рішення Майка Бостока покращено завдяки 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));