Вызов обратного вызова в конце перехода

Мне нужно сделать метод 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);

• В этой демонстрации используется событие «end», чтобы связать множество переходов по порядку.
• Пример пончик , который поставляется с D3 также использует это , чтобы цепь вместе несколько переходов.
• Вот моя собственная демонстрация, которая меняет стиль элементов в начале и в конце перехода.

Из документации для transition.each([type],listener):

Если указан тип , добавляет прослушиватель событий перехода, поддерживающий как «начало», так и «конец». Слушатель будет вызываться для каждого отдельного элемента в переходе, даже если переход имеет постоянную задержку и продолжительность. Событие start может использоваться для запуска мгновенного изменения при переходе каждого элемента. Конечное событие может использоваться для инициирования многоступенчатых переходов путем выбора текущего элемента 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(и только эти аргументы). Важно отметить, что по умолчанию это не будет применяться, callbackесли 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

Решение Майка Бостока улучшено за счет 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));