Что такое событие «start» в d3.js?

Question

я заметил в Босток-х most recent block он имеет «начать» событие:

d3.select("body").selectAll("div") 
    .data(d3.range(n)) 
    .enter().append("div") 
    .transition() 
    .delay(function(d, i) { return i + Math.random() * n/4; }) 
    .ease(d3.easeLinear) 
    .on("start", function repeat() { 
     d3.active(this) 
      .styleTween("background-color", function() { return whiteblue; }) 
      .transition() 
      .delay(1000) 
      .styleTween("background-color", function() { return blueorange; }) 
      .transition() 
      .delay(1000) 
      .styleTween("background-color", function() { return orangewhite; }) 
      .transition() 
      .delay(n) 
      .on("start", repeat); 
     }); 

Кто-нибудь знает, что это делает?

Является ли он эквивалентным нагрузке или уволен после периода задержки, когда начинается переход?

Answer 1

Этот блок написан на d3 v4. Похоже, что v3 transition.each был переименован в transition.on (что имеет смысл). Это говорит start всегда событие типа для перехода:

Если указан тип, добавляет прослушиватель событий перехода, с поддержкой «Пуск», «конец» и «прервать» события. Слушателем будет , вызываемый для каждого отдельного элемента перехода.

Событие запуска вызывается во время первого асинхронного обратного вызова (клеща) перехода, до того, как подростки вызываются. Для переходов с нулевой задержкой это обычно около 17 мс после того, как запланирован переход . События состояния полезны для запуска мгновенных изменений для каждого элемента, таких как изменение атрибутов , которые невозможно интерполировать.

Чтобы ответить на конкретный вопрос (мой смелый выше), или это, когда переход начинается после периода задержки »- да.

Answer 2

Я уже думал, пытаясь понять это. «start» не является обычным событием DOM и не является одним из событий, предоставленных D3. После выполнения некоторых исследований, вот что я пришел, чтобы узнать:

«Переходы с ограниченной формой ключевой кадр анимации только два ключевых кадров: начать и КОНЕЦ»

«Начало событие отправляется, и переход инициализирует его твины, что может включать в себя извлечение стартовых значений из DOM и построение интерполяторов ».

От: https://bost.ocks.org/mike/transition/

(который связан непосредственно с d3 перехода репо @https://github.com/d3/d3-transition#active см «работает с переходами» ссылка).

Я считаю, что библиотека D3-перехода, используемая в примере, неявно использует то же самое - то есть переходы имеют два ключевых кадра. «Начало» «событие» фактически представляет собой первый ключевой кадр. На самом деле, есть небольшая задержка, когда начинается переход, поэтому имеет смысл, что один будет ждать, пока ключевой кадр «начнется».