d3-transition
Переход — это интерфейс, подобный выбору, для анимации изменений в DOM. Вместо моментального применения изменений, переходы плавно интерполируют DOM от текущего состояния к желаемому целевому состоянию в течение заданной длительности.
Для применения перехода выберите элементы, вызовите выбор.transition, а затем внесите необходимые изменения. Например:
d3.select("body")
.transition()
.style("background-color", "red"); Переходы поддерживают большинство методов выбора (такие как переход.attr и переход.style вместо выбор.attr и выбор.style), но не все; например, вы должны добавить элементы или связать данные до начала перехода. Для удобства удаления элементов по окончании перехода предоставляется оператор переход.remove.
Для вычисления промежуточного состояния переходы используют различные встроенные интерполяторы. Цвета, числа и преобразования обнаруживаются автоматически. Строки с вложенными числами также обнаруживаются, что характерно для многих стилей (таких как отступы или размеры шрифтов) и путей.
Чтобы указать пользовательский интерполятор, используйте переход.attrTween, переход.styleTween или переход.tween.
Установка
Если вы используете NPM, npm install d3-transition. В противном случае загрузите последнюю версию. Вы также можете загрузить напрямую с d3js.org, как отдельную библиотеку или как часть D3. Поддерживаются среды AMD, CommonJS и vanilla. В vanilla экспортируется глобальная переменная d3:
<script src="https://d3js.org/d3-color.v2.min.js"></script> <script src="https://d3js.org/d3-dispatch.v2.min.js"></script> <script src="https://d3js.org/d3-ease.v2.min.js"></script> <script src="https://d3js.org/d3-interpolate.v2.min.js"></script> <script src="https://d3js.org/d3-selection.v2.min.js"></script> <script src="https://d3js.org/d3-timer.v2.min.js"></script> <script src="https://d3js.org/d3-transition.v2.min.js"></script> <script> var transition = d3.transition(); </script>
Попробуйте d3-transition в вашем браузере.
Справочник API
Выбор элементов
Переходы выводятся из выборов с помощью выбор.transition. Вы также можете создать переход на элементе корня документа с помощью d3.transition.
выбор.transition([имя]) · Источник
Возвращает новый переход на заданном выборе со значением имя. Если имя не указано, используется null. Новый переход эксклюзивен только с другими переходами с тем же именем.
Если имя является экземпляром перехода, возвращаемый переход имеет тот же идентификатор и имя, что и указанный переход. Если переход с тем же идентификатором уже существует на выбранном элементе, для этого элемента возвращается существующий переход. В противном случае, временные параметры возвращаемого перехода наследуются от существующего перехода с тем же идентификатором на ближайшем предке каждого выбранного элемента. Таким образом, этот метод может использоваться для синхронизации перехода между несколькими выборами или для повторного выбора перехода для определенных элементов и изменения его конфигурации. Например:
var t = d3.transition()
.duration(750)
.ease(d3.easeLinear);
d3.selectAll(".apple").transition(t)
.style("fill", "red");
d3.selectAll(".orange").transition(t)
.style("fill", "orange"); Если указанный переход не найден в выбранном узле или его предках (например, если переход уже завершился), используются параметры тайминга по умолчанию; однако в будущей версии это, скорее всего, будет изменено на ошибку. См. #59.
выбор.interrupt([имя]) · Источник
Прерывает активный переход указанного имени на выбранных элементах и отменяет все ожидающие переходы с указанным именем, если таковые имеются. Если имя не указано, используется null.
Прерывание перехода на элементе не влияет на переходы на дочерних элементах. Например, переход оси состоит из нескольких независимых, синхронизированных переходов на дочерних элементах оси элемента G (линии делений, метки делений, путь области определения и т. д.). Для прерывания перехода оси необходимо прервать дочерние элементы:
selection.selectAll("*").interrupt(); Универсальный селектор , *, выбирает все дочерние элементы. Если вы также хотите прервать сам элемент G:
selection.interrupt().selectAll("*").interrupt(); d3.interrupt(узел[, имя]) · Источник
Прерывает активный переход указанного имени на указанном узле и отменяет все ожидающие переходы с указанным именем, если таковые имеются. Если имя не указано, используется null. См. также выбор.interrupt.
d3.transition([имя]) · Источник
Возвращает новый переход на элементе корня, document.documentElement, со значением имя. Если имя не указано, используется null. Новый переход эксклюзивен только с другими переходами с тем же именем. Имя также может быть экземпляром перехода; см. выбор.transition. Этот метод эквивалентен:
d3.selection() .transition(name)
Эта функция также может использоваться для проверки переходов (instanceof d3.transition) или для расширения прототипа перехода.
переход.select(селектор) · Источник
Для каждого выбранного элемента выбирается первый дочерний элемент, соответствующий указанной строке селектора, если таковой имеется, и возвращается переход на результирующем выборе. Селектор может быть указан либо как строка селектора, либо как функция. Если функция, она вычисляется для каждого выбранного элемента в порядке, принимая текущую данную (d), текущий индекс (i) и текущую группу (узлы), где this является текущим элементом DOM. Новый переход имеет тот же идентификатор, имя и временные параметры, что и этот переход; однако, если переход с тем же идентификатором уже существует на выбранном элементе, возвращается существующий переход для этого элемента.
Этот метод эквивалентен получению выбора для этого перехода с помощью переход.selection, созданию подвыбора с помощью выбор.select и затем созданию нового перехода с помощью выбор.transition:
transition .selection() .select(selector) .transition(transition)
переход.selectAll(селектор) · Источник
Для каждого выбранного элемента выбираются все дочерние элементы, соответствующие указанной строке селектора, если таковые имеются, и возвращается переход на результирующем выборе. Селектор может быть указан либо как строка селектора, либо как функция. Если функция, она вычисляется для каждого выбранного элемента в порядке, принимая текущую данную (d), текущий индекс (i) и текущую группу (узлы), где this является текущим элементом DOM. Новый переход имеет тот же идентификатор, имя и временные параметры, что и этот переход; однако, если переход с тем же идентификатором уже существует на выбранном элементе, возвращается существующий переход для этого элемента.
Этот метод эквивалентен получению выбора для этого перехода с помощью переход.selection, созданию подвыбора с помощью выбор.selectAll и затем созданию нового перехода с помощью выбор.transition:
transition .selection() .selectAll(selector) .transition(transition)
переход.filter(фильтр) · Источник
Для каждого выбранного элемента выбираются только элементы, соответствующие указанному фильтру, и возвращается переход на результирующем выборе. Фильтр может быть указан либо как строка селектора, либо как функция. Если функция, она вычисляется для каждого выбранного элемента в порядке, принимая текущую данную (d), текущий индекс (i) и текущую группу (узлы), где this является текущим элементом DOM. Новый переход имеет тот же идентификатор, имя и временные параметры, что и этот переход; однако, если переход с тем же идентификатором уже существует на выбранном элементе, возвращается существующий переход для этого элемента.
Этот метод эквивалентен получению выбора для этого перехода с помощью переход.selection, созданию подвыбора с помощью выбор.filter и затем созданию нового перехода с помощью выбор.transition:
transition .selection() .filter(filter) .transition(transition)
переход.merge(другой) · Источник
Возвращает новый переход, объединяющий этот переход с указанным другим переходом, который должен иметь тот же идентификатор, что и этот переход. Возвращаемый переход имеет то же количество групп, тех же родителей, то же имя и тот же идентификатор, что и этот переход. Любые отсутствующие (null) элементы в этом переходе заполняются соответствующим элементом, если он присутствует (не null), из другого перехода.
Этот метод эквивалентен получению выбора для этого перехода с помощью переход.selection, слиянию с выбором, аналогично полученному из другого перехода с помощью выбор.merge, и затем созданию нового перехода с помощью выбор.transition:
transition .selection() .merge(other.selection()) .transition(transition)
transition.transition() · Source
Возвращает новую анимацию на тех же выбранных элементах, что и эта анимация, запланированную на начало по завершении этой анимации. Новая анимация наследует время, равное времени этой анимации плюс её задержку и длительность. Новая анимация также наследует имя, длительность и способы сглаживания этой анимации. Этот метод может использоваться для планирования последовательности связанных анимаций. Например:
d3.selectAll(".apple")
.transition() // First fade to green.
.style("fill", "green")
.transition() // Then red.
.style("fill", "red")
.transition() // Wait one second. Then brown, and remove.
.delay(1000)
.style("fill", "brown")
.remove(); Задержка каждой анимации относительна к предыдущей анимации. Таким образом, в приведенном выше примере яблоки останутся красными в течение одной секунды, прежде чем начнется последняя анимация перехода в коричневый цвет.
transition.selection() · Source
Возвращает выбор, соответствующий этой анимации.
d3.active(node[, name]) · Source
Возвращает активную анимацию на указанном узле с указанным именем, если таковая имеется. Если имя не указано, используется null. Возвращает null, если на указанном узле нет такой активной анимации. Этот метод полезен для создания связанных анимаций. Например, для запуска режима диско:
d3.selectAll("circle").transition()
.delay(function(d, i) { return i * 50; })
.on("start", function repeat() {
d3.active(this)
.style("fill", "red")
.transition()
.style("fill", "green")
.transition()
.style("fill", "blue")
.transition()
.on("start", repeat);
}); См. связанные анимации для примера.
Изменение элементов
После выбора элементов и создания анимации с помощью выбор.transition используйте методы преобразования анимации для изменения содержимого документа.
transition.attr(name, value) · Source
Для каждого выбранного элемента задает интерполяцию атрибута для атрибута с указанным именем до указанного целевого значения. Начальное значение интерполяции — значение атрибута в момент начала анимации. Целевое значение может быть задано либо как константа, либо как функция. Если это функция, она вызывается немедленно для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом this — текущий элемент DOM.
Если целевое значение равно null, атрибут удаляется в момент начала анимации. В противном случае интерполятор выбирается на основе типа целевого значения, используя следующий алгоритм:
- Если значение — число, используйте interpolateNumber.
- Если значение — цвет или строка, преобразуемая в цвет, используйте interpolateRgb.
- Используйте interpolateString.
Для применения другого интерполятора используйте анимация.attrTween.
transition.attrTween(name[, factory]) · Source
Если factory задано и не равно null, задает интерполяцию атрибута для атрибута с указанным именем с указанным интерполятором factory. Интерполятор — функция, которая возвращает интерполяцию; при запуске анимации factory вызывается для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом this — текущий элемент DOM. Возвращаемая интерполяция затем будет вызываться для каждой итерации анимации в порядке, получая t — сглаженное время, обычно в диапазоне [0, 1]. Наконец, возвращаемое значение интерполяции используется для установки значения атрибута. Интерполяция должна возвращать строку. (Чтобы удалить атрибут в начале анимации, используйте анимация.attr; чтобы удалить атрибут в конце анимации, используйте анимация.on для прослушивания события end.)
Если заданный factory равен null, удаляет ранее заданную интерполяцию атрибута с указанным именем, если она есть. Если factory не задано, возвращает текущий интерполятор для атрибута с указанным именем или undefined, если такой интерполяции нет.
Например, чтобы интерполировать атрибут fill от красного до синего:
transition.attrTween("fill", function() {
return d3.interpolateRgb("red", "blue");
}); Или чтобы интерполировать от текущего fill до синего, как в анимация.attr:
transition.attrTween("fill", function() {
return d3.interpolateRgb(this.getAttribute("fill"), "blue");
}); Или чтобы применить пользовательский интерполятор радуги:
transition.attrTween("fill", function() {
return function(t) {
return "hsl(" + t * 360 + ",100%,50%)";
};
}); Этот метод полезен для задания пользовательского интерполятора, такого как интерполятор, понимающий SVG пути. Полезная техника — интерполяция данных, где d3.interpolateObject используется для интерполяции двух значений данных, а полученное значение затем используется (например, с формой) для вычисления нового значения атрибута.
transition.style(name, value[, priority]) · Source
Для каждого выбранного элемента задает интерполяцию стиля для стиля с указанным именем до указанного целевого значения с указанным приоритетом. Начальное значение интерполяции — значение стиля встраиваемого стиля, если оно есть, а в противном случае — вычисляемое значение стиля в момент начала анимации. Целевое значение может быть задано либо как константа, либо как функция. Если это функция, она вызывается немедленно для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом this — текущий элемент DOM.
Если целевое значение равно null, стиль удаляется в момент начала анимации. В противном случае интерполятор выбирается на основе типа целевого значения, используя следующий алгоритм:
- Если значение — число, используйте interpolateNumber.
- Если значение — цвет или строка, преобразуемая в цвет, используйте interpolateRgb.
- Используйте interpolateString.
Для применения другого интерполятора используйте анимация.styleTween.
transition.styleTween(name[, factory[, priority]]) · Source
Если factory задано и не равно null, задает интерполяцию стиля для стиля с указанным именем с указанным интерполятором factory. Интерполятор — функция, которая возвращает интерполяцию; при запуске анимации factory вызывается для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом this — текущий элемент DOM. Возвращаемая интерполяция затем будет вызываться для каждой итерации анимации в порядке, получая t — сглаженное время, обычно в диапазоне [0, 1]. Наконец, возвращаемое значение интерполяции используется для установки значения стиля с указанным приоритетом. Интерполяция должна возвращать строку. (Чтобы удалить стиль в начале анимации, используйте анимация.style; чтобы удалить стиль в конце анимации, используйте анимация.on для прослушивания события end.)
Если заданный factory равен null, удаляет ранее заданную интерполяцию стиля с указанным именем, если она есть. Если factory не задано, возвращает текущий интерполятор для стиля с указанным именем или undefined, если такой интерполяции нет.
Например, чтобы интерполировать стиль fill от красного до синего:
transition.styleTween("fill", function() {
return d3.interpolateRgb("red", "blue");
}); Или чтобы интерполировать от текущего fill до синего, как в анимация.style:
transition.styleTween("fill", function() {
return d3.interpolateRgb(this.style.fill, "blue");
}); Или чтобы применить пользовательский интерполятор радуги:
transition.styleTween("fill", function() {
return function(t) {
return "hsl(" + t * 360 + ",100%,50%)";
};
}); Этот метод полезен для задания пользовательского интерполятора, например, с интерполяцией данных, где d3.interpolateObject используется для интерполяции двух значений данных, а полученное значение затем используется для вычисления нового значения стиля.
transition.text(value) · Source
Для каждого выбранного элемента устанавливает содержимое текста до указанного целевого значения в начале анимации. Значение может быть задано либо как константа, либо как функция. Если это функция, она вызывается немедленно для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), при этом this — текущий элемент DOM. Значение возврата функции затем используется для установки содержимого текста каждого элемента. Значение null очистит содержимое.
Чтобы интерполировать текст, а не установить его в начале, используйте анимация.textTween или добавьте заменяющий элемент и перекрестно-затухающую непрозрачность. Текст по умолчанию не интерполируется, так как это обычно нежелательно.
transition.textTween(factory) · Source, Примеры
Если factory указан и не равен null, присваивает текст tween указанному интерполятору factory. Фабрика интерполятора — это функция, которая возвращает интерполятор; когда переход начинается, factory вычисляется для каждого выбранного элемента в порядке следования, передавая текущие данные d и индекс i, а контекст this — в качестве текущего элемента DOM. Возвращённый интерполятор затем вызывается для каждого кадра перехода в порядке следования, передавая сглаженное время t, обычно в диапазоне [0, 1]. Наконец, значение, возвращаемое интерполятором, используется для установки текста. Интерполятор должен возвращать строку.
Например, для интерполяции текста с целыми числами от 0 до 100:
transition.textTween(function() {
return d3.interpolateRound(0, 100);
}); Если указанный factory равен null, удаляет ранее назначенный текст tween, если таковой имеется. Если factory не указан, возвращает текущую фабрику интерполятора для текста или undefined, если такой tween не существует.
transition.remove() · Source
Для каждого выбранного элемента удаляет элемент по окончании перехода, при условии, что у элемента нет других активных или ожидающих переходов. Если у элемента есть другие активные или ожидающие переходы, ничего не происходит.
transition.tween(name[, value]) · Source
Для каждого выбранного элемента присваивает tween с указанным именем name со значением функции value. value должен быть задан как функция, возвращающая функцию. Когда переход начинается, функция value вычисляется для каждого выбранного элемента в порядке следования, передавая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Возвращённая функция затем вызывается для каждого кадра перехода в порядке следования, передавая сглаженное время t, обычно в диапазоне [0, 1]. Если указанное value равно null, удаляет ранее назначенный tween с указанным name, если таковой имеется.
Например, для интерполяции атрибута fill в синий цвет, как в transition.attr:
transition.tween("attr.fill", function() {
var i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
return function(t) {
this.setAttribute("fill", i(t));
};
}); Этот метод полезен для задания пользовательского интерполятора или выполнения побочных эффектов, например, для анимации смещения прокрутки.
Временные параметры
Можно настроить сглаживание, задержку и продолжительность перехода. Например, задержка на элемент может использоваться для последовательного изменения порядка элементов, улучшая восприятие. Смотрите Animated Transitions in Statistical Data Graphics для рекомендаций.
transition.delay([value]) · Source
Для каждого выбранного элемента устанавливает задержку перехода на указанное value в миллисекундах. value может быть указан либо как константа, либо как функция. Если функция, она сразу же вычисляется для каждого выбранного элемента в порядке следования, передавая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Возвращаемое значение функции затем используется для установки задержки перехода каждого элемента. Если задержка не указана, она по умолчанию равна нулю.
Если value не указан, возвращает текущее значение задержки для первого (не нулевого) элемента в переходе. Это обычно полезно только если известно, что переход содержит ровно один элемент.
Указание задержки, являющейся кратной индексу i — удобный способ последовательно устанавливать задержки переходов для набора элементов. Например:
transition.delay(function(d, i) { return i * 10; }); Конечно, вы также можете вычислить задержку как функцию данных или отсортировать выборку перед вычислением задержки на основе индекса.
transition.duration([value]) · Source
Для каждого выбранного элемента устанавливает продолжительность перехода на указанное value в миллисекундах. value может быть указан либо как константа, либо как функция. Если функция, она сразу же вычисляется для каждого выбранного элемента в порядке следования, передавая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Возвращаемое значение функции затем используется для установки продолжительности перехода каждого элемента. Если продолжительность не указана, она по умолчанию равна 250 мс.
Если value не указан, возвращает текущее значение продолжительности для первого (не нулевого) элемента в переходе. Это обычно полезно только если известно, что переход содержит ровно один элемент.
transition.ease([value]) · Source
Устанавливает функцию сглаживания перехода для всех выбранных элементов. value должен быть задан как функция. Функция сглаживания вызывается для каждого кадра анимации, получая нормализованное время t в диапазоне [0, 1]; она должна возвращать сглаженное время tʹ, которое обычно также находится в диапазоне [0, 1]. Хорошая функция сглаживания должна возвращать 0, если t = 0, и 1, если t = 1. Если функция сглаживания не задана, она по умолчанию равна d3.easeCubic.
Если value не указан, возвращает текущую функцию сглаживания для первого (не нулевого) элемента в переходе. Это обычно полезно только если известно, что переход содержит ровно один элемент.
transition.easeVarying(factory) Source
Задаёт фабрику для функции сглаживания перехода. factory должна быть функцией. Она вызывается для каждого узла выборки, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Она должна возвращать функцию сглаживания.
Управление потоком
Для расширенного использования переходы предоставляют методы для пользовательского управления потоком.
transition.end() · Source
Возвращает промис, который разрешается, когда каждый выбранный элемент завершает переход. Если переход какого-либо элемента отменён или прерван, промис отклоняется.
transition.on(typenames[, listener]) · Source
Добавляет или удаляет listener к каждому выбранному элементу для указанных событий typenames. typenames — один из следующих типов событий:
-
start— когда переход начинается. -
end— когда переход заканчивается. -
interrupt— когда переход прерывается. -
cancel— когда переход отменяется.
См. The Life of a Transition для более подробной информации. Обратите внимание, что это не события DOM, как реализованы в selection.on и selection.dispatch, а события перехода!
Тип может быть необязательно после точки (.) и имени; необязательное имя позволяет регистрировать несколько обратных вызовов для получения событий одного типа, таких как start.foo и start.bar. Для указания нескольких имён типов разделяйте их пробелами, например, interrupt end или start.foo start.bar.
Когда указанное событие перехода отправляется в выбранный узел, указанный listener вызывается для переходящего элемента, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Обратные вызовы всегда получают последние данные для своего элемента, но индекс является свойством выборки и фиксируется при назначении обратного вызова; для обновления индекса необходимо повторно назначить обратный вызов.
Если ранее был зарегистрирован обработчик событий для того же typename на выбранном элементе, старый обработчик удаляется перед добавлением нового. Для удаления обработчика передайте null в качестве listener. Для удаления всех обработчиков с заданным именем передайте null в качестве listener и .foo в качестве typename, где foo — имя; для удаления всех обработчиков без имени укажите . в качестве typename.
Если listener не указан, возвращает текущего обработчика для указанного события typename на первом (не нулевом) выбранном элементе, если таковой имеется. Если указано несколько имён типов, возвращается первый соответствующий обработчик.
transition.each(function) · Source
Вызывает указанную function для каждого выбранного элемента, передавая текущие данные (d), текущий индекс (i) и текущую группу (nodes), а this — в качестве текущего элемента DOM. Этот метод может быть использован для вызова произвольного кода для каждого выбранного элемента и полезен для создания контекста для одновременного доступа к родительским и дочерним данным. Эквивалентно selection.each.
transition.call(function[, arguments…]) · Source
Вызывает указанную function ровно один раз, передавая этот переход вместе с любыми необязательными arguments. Возвращает этот переход. Это эквивалентно вызову функции вручную, но упрощает цепочку вызовов методов. Например, для установки нескольких атрибутов в переиспользуемой функции:
function color(transition, fill, stroke) {
transition
.style("fill", fill)
.style("stroke", stroke);
} Теперь предположим:
d3.selectAll("div").transition().call(color, "red", "blue"); Это эквивалентно:
color(d3.selectAll("div").transition(), "red", "blue"); Эквивалентно selection.call.
transition.empty() · Source
Возвращает true, если данная анимация не содержит элементов (не равных null). Эквивалентно selection.empty.
transition.nodes() · Source
Возвращает массив всех элементов (не равных null) в этой анимации. Эквивалентно selection.nodes.
transition.node() · Source
Возвращает первый элемент (не равный null) в этой анимации. Если анимация пуста, возвращает null. Эквивалентно selection.node.
transition.size() · Source
Возвращает общее количество элементов в этой анимации. Эквивалентно selection.size.
Жизненный цикл анимации
Сразу после создания анимации, например, с помощью selection.transition или transition.transition, вы можете настроить анимацию, используя методы, такие как transition.delay, transition.duration, transition.attr и transition.style. Методы, которые задают целевые значения (например, transition.attr), вычисляются синхронно; однако методы, которые требуют начального значения для интерполяции, такие как transition.attrTween и transition.styleTween, должны быть отложены до начала анимации.
Вскоре после создания, либо в конце текущей фазы, либо во время следующей фазы, анимация планируется. На этом этапе задержка и start обработчики событий больше не могут быть изменены; попытка сделать это вызывает ошибку с сообщением «слишком поздно: уже запланировано» (или, если анимация завершена, «анимация не найдена»).
Когда анимация впоследствии запускается, она прерывает активную анимацию с тем же именем на том же элементе, если таковая имеется, отправляя interrupt событие зарегистрированным слушателям. (Обратите внимание, что прерывания происходят при запуске, а не при создании, и поэтому даже анимация с нулевой задержкой немедленно не прервет активную анимацию: старой анимации даётся конечная фаза. Используйте selection.interrupt, чтобы прервать немедленно.) Запускающая анимация также отменяет любые ожидающие анимации с тем же именем на том же элементе, созданные до запускающей анимации. Затем анимация отправляет start событие зарегистрированным слушателям. Это последний момент, когда анимацию можно изменить: временные характеристики, интерполяции и обработчики событий анимации не могут быть изменены во время её выполнения; попытка сделать это вызывает ошибку с сообщением «слишком поздно: уже запущена» (или, если анимация завершена, «анимация не найдена»). Анимация инициализирует свои интерполяции сразу после запуска.
Во время фазы запуска анимации, но после того, как все анимации, начинающиеся в этой фазе, были запущены, анимация вызывает свои интерполяции в первый раз. Объединение инициализации интерполяций, которая обычно включает чтение из DOM, улучшает производительность, избегая чередования чтений и записей в DOM.
В каждой фазе, в которой анимация активна, она вызывает свои интерполяции со значением t, интерполированным от 0 до 1. В каждой фазе анимация вызывает свои интерполяции в том порядке, в котором они были зарегистрированы.
Когда анимация заканчивается, она вызывает свои интерполяции один последний раз со значением t (не интерполированным) 1. Затем она отправляет end событие зарегистрированным слушателям. Это последний момент, когда можно просмотреть анимацию: после завершения анимация удаляется из элемента, и её конфигурация уничтожается. (Конфигурация анимации также уничтожается при прерывании или отмене.) Попытка просмотреть анимацию после её уничтожения вызывает ошибку с сообщением «анимация не найдена».
© 2010–2020 Michael Bostock
Licensed under the BSD License.
https://github.com/d3/d3-transition
