d3-transition

Переход — это интерфейс, похожий на выбор, для анимации изменений в DOM. Вместо мгновенного применения изменений, переходы плавно интерполируют DOM от текущего состояния к целевому состоянию в течение заданной длительности.

Чтобы применить переход, выберите элементы, вызовите выбор.переход, а затем внесите необходимые изменения. Например:

d3.select("body")
  .transition()
    .style("background-color", "red");

Переходы поддерживают большинство методов выбора (например, переход.attr и переход.style вместо выбор.attr и выбор.style), но не все. Например, вы должны добавить элементы или связать данные до начала перехода. Оператор переход.remove предназначен для удобного удаления элементов по завершении перехода.

Для вычисления промежуточного состояния переходы используют различные встроенные интерполяторы. Цвета, числа и преобразования автоматически распознаются. Также распознаются строки с вложенными числами, как это часто бывает со многими стилями (такими как отступы или размеры шрифтов) и путями. Чтобы указать пользовательский интерполятор, используйте переход.attrTween, переход.styleTween или переход.tween.

Установка

Если вы используете npm, npm install d3-transition. Вы также можете загрузить последнюю версию с GitHub. Для простого HTML в современных браузерах импортируйте d3-transition из Skypack:

<script type="module">

import {transition} from "https://cdn.skypack.dev/d3-transition@3";

const t = transition();

</script>

Для устаревших сред вы можете загрузить UMD-пакет d3-transition с CDN на основе npm, например, jsDelivr; экспортируется глобальная переменная d3:

<script src="https://cdn.jsdelivr.net/npm/d3-color@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-dispatch@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-ease@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-interpolate@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-selection@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-timer@3"></script>
<script src="https://cdn.jsdelivr.net/npm/d3-transition@3"></script>
<script>

const t = d3.transition();

</script>

Попробуйте d3-transition в вашем браузере.

Выбор элементов

Переходы выводятся из выборов с помощью выбор.переход. Вы также можете создать переход для элемента корня документа, используя d3.переход.

выбор.переход([имя]) · Исходный код

Возвращает новый переход для данного выбора с указанным именем. Если имя не указано, используется null. Новый переход эксклюзивен только с другими переходами с тем же именем.

Если имя — это экземпляр перехода, возвращаемый переход имеет тот же идентификатор и имя, что и указанный переход. Если переход с таким же идентификатором уже существует на выбранном элементе, для этого элемента возвращается существующий переход. В противном случае временные параметры возвращаемого перехода наследуются от существующего перехода с тем же идентификатором у ближайшего предка каждого выбранного элемента. Таким образом, этот метод можно использовать для синхронизации перехода по нескольким выборам или для повторного выбора перехода для определенных элементов и изменения его конфигурации. Например:

const 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.

выбор.прервать([имя]) · Исходный код

Прерывает активный переход указанного имени для выбранных элементов и отменяет все ожидающие переходы с указанным именем, если таковые имеются. Если имя не указано, используется null.

Прерывание перехода на элементе не влияет на переходы на дочерних элементах. Например, переход оси состоит из нескольких независимых, синхронизированных переходов на потомках элемента оси G (линии отметки, метки отметки, путь области, и т.д.). Поэтому для прерывания перехода оси необходимо прервать дочерние элементы:

selection.selectAll("*").interrupt();

Универсальный селектор, *, выбирает все дочерние элементы. Если вы также хотите прервать сам элемент G:

selection.interrupt().selectAll("*").interrupt();

d3.прервать(узел[, имя]) · Исходный код

Прерывает активный переход указанного имени для указанного узла и отменяет все ожидающие переходы с указанным именем, если таковые имеются. Если имя не указано, используется null. См. также выбор.прервать.

d3.переход([имя]) · Исходный код

Возвращает новый переход для корневого элемента, document.documentElement, с указанным именем. Если имя не указано, используется null. Новый переход эксклюзивен только с другими переходами с тем же именем. Имя также может быть экземпляром перехода; см. выбор.переход. Этот метод эквивалентен:

d3.selection()
  .transition(name)

Эта функция также может использоваться для проверки переходов (instanceof d3.transition) или для расширения прототипа перехода.

переход.выбрать(селектор) · Исходный код

Для каждого выбранного элемента выбирает первый дочерний элемент, соответствующий указанной строке селектора, если таковой имеется, и возвращает переход на полученном выборе. Селектор может быть указан либо как строка селектора, либо как функция. Если функция, она вычисляется для каждого выбранного элемента, в порядке следования, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Новый переход имеет тот же идентификатор, имя и временные параметры, что и этот переход; однако, если переход с таким же идентификатором уже существует на выбранном элементе, для этого элемента возвращается существующий переход.

Этот метод эквивалентен получению выбора для этого перехода с помощью переход.выбор, созданию подвыбора с помощью выбор.выбрать и затем созданию нового перехода с помощью выбор.переход:

transition
  .selection()
  .select(selector)
  .transition(transition)

переход.выбратьВсе(селектор) · Исходный код

Для каждого выбранного элемента выбирает все дочерние элементы, соответствующие указанной строке селектора, если таковые имеются, и возвращает переход на полученном выборе. Селектор может быть указан либо как строка селектора, либо как функция. Если функция, она вычисляется для каждого выбранного элемента, в порядке следования, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), при этом this — это текущий элемент DOM. Новый переход имеет тот же идентификатор, имя и временные параметры, что и этот переход; однако, если переход с таким же идентификатором уже существует на выбранном элементе, для этого элемента возвращается существующий переход.

Этот метод эквивалентен получению выбора для этого перехода с помощью переход.выбор, созданию подвыбора с помощью выбор.выбратьВсе и затем созданию нового перехода с помощью выбор.переход:

transition
  .selection()
  .selectAll(selector)
  .transition(transition)

переход.выбратьПотомка([селектор]) · Исходный код

Этот метод эквивалентен получению выбора для этого перехода с помощью переход.выбор, созданию подвыбора с помощью выбор.выбратьПотомка и затем созданию нового перехода с помощью выбор.переход:

transition
  .selection()
  .selectChild(selector)
  .transition(transition)

переход.выбратьПотомки([селектор]) · Исходный код

Для каждого выбранного элемента выбирает всех потомков, которые соответствуют указанной строке селектора, если таковые имеются, и возвращает переход по результату выбора. Селектор может быть задан либо как строка селектора, либо как функция. Если это функция, она вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), с this как текущий элемент DOM. Новый переход имеет тот же идентификатор, имя и временные характеристики, что и этот переход; однако, если переход с тем же идентификатором уже существует для выбранного элемента, возвращается существующий переход для этого элемента.

Этот метод эквивалентен получению выбора для этого перехода через переход.выбор, созданию подвыбора через выбор.selectChildren и затем созданию нового перехода через выбор.transition:

transition
  .selection()
  .selectChildren(selector)
  .transition(transition)

переход.filter(фильтр) · Источник

Для каждого выбранного элемента выбираются только элементы, которые соответствуют указанному фильтру, и возвращается переход по результату выбора. Фильтр может быть задан либо как строка селектора, либо как функция. Если это функция, она вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), с this как текущий элемент DOM. Новый переход имеет тот же идентификатор, имя и временные характеристики, что и этот переход; однако, если переход с тем же идентификатором уже существует для выбранного элемента, возвращается существующий переход для этого элемента.

Этот метод эквивалентен получению выбора для этого перехода через переход.выбор, созданию подвыбора через выбор.filter и затем созданию нового перехода через выбор.transition:

transition
  .selection()
  .filter(filter)
  .transition(transition)

переход.merge(другой) · Источник

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

Этот метод эквивалентен получению выбора для этого перехода через переход.выбор, объединению с выбором, аналогично полученным из перехода другой через выбор.merge, и затем созданию нового перехода через выбор.transition:

transition
  .selection()
  .merge(other.selection())
  .transition(transition)

переход.transition() · Источник

Возвращает новый переход на тех же выбранных элементах, что и этот переход, запланированный на запуск по завершении этого перехода. Новый переход наследует время отсчета, равное времени этого перехода плюс его задержка и длительность. Новый переход также наследует имя, длительность и сглаживание этого перехода. Этот метод можно использовать для планирования последовательности цепочек переходов. Например:

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

Задержка для каждого перехода относительна к предыдущему переходу. Таким образом, в приведенном выше примере яблоки останутся красными в течение одной секунды, прежде чем начнется последний переход к коричневому цвету.

переход.выбор() · Источник

Возвращает выбор, соответствующий этому переходу.

d3.active(узел[, имя]) · Источник

Возвращает активный переход на указанном узле с указанным именем, если таковой имеется. Если имя не указано, используется 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, используйте методы преобразования перехода для изменения содержимого документа.

переход.attr(имя, значение) · Источник

Для каждого выбранного элемента назначается tween атрибута для атрибута с указанным именем для указанного целевого значения. Начальное значение tween — это значение атрибута в момент начала перехода. Целевое значение может быть задано либо как константа, либо как функция. Если это функция, она сразу же вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), с this как текущий элемент DOM.

Если целевое значение равно null, атрибут удаляется в начале перехода. В противном случае интерполятор выбирается на основе типа целевого значения, используя следующий алгоритм:

Если значение — число, используется interpolateNumber.
Если значение — цвет или строка, преобразуемая в цвет, используется interpolateRgb.
Используется interpolateString.

Для применения другого интерполятора используйте переход.attrTween.

переход.attrTween(имя[, фабрикатор]) · Источник

Если фабрикатор указан и не равен null, назначается атрибутный tween для атрибута с указанным именем для указанного интерполятора фабрикатор. Фабрикатор интерполятора — это функция, которая возвращает интерполятор; когда переход начинается, фабрикатор вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), с this как текущий элемент DOM. Затем возвращаемый интерполятор будет вызываться для каждой фазы перехода по порядку, получая сглаженное время t, обычно в диапазоне [0, 1]. Наконец, возвращаемое значение интерполятора будет использоваться для установки значения атрибута. Интерполятор должен возвращать строку. (Чтобы удалить атрибут в начале перехода, используйте переход.attr; чтобы удалить атрибут в конце перехода, используйте переход.on для прослушивания события end.)

Если указанный фабрикатор равен null, удаляется ранее назначенный атрибутный tween указанного имени, если таковой имеется. Если фабрикатор не указан, возвращается текущий фабрикатор интерполятора для атрибута с указанным именем или undefined, если такой tween не существует.

Например, для интерполяции атрибута fill от красного до синего:

transition.attrTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});

Или для интерполяции от текущего заполнения до синего, как в переход.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 используется для интерполяции двух значений данных, а полученное значение затем используется (например, с формой) для вычисления нового значения атрибута.

переход.style(имя, значение[, приоритет]) · Источник

Для каждого выбранного элемента назначается style tween для стиля с указанным именем для указанного целевого значения с указанным приоритетом. Начальное значение tween — это значение стиля в строке inline, если оно имеется, а в противном случае — вычисленное значение в момент начала перехода. Целевое значение может быть задано либо как константа, либо как функция. Если это функция, она сразу же вычисляется для каждого выбранного элемента по порядку, получая текущие данные (d), текущий индекс (i) и текущую группу (узлы), с this как текущий элемент DOM.

Если целевое значение равно null, стиль удаляется в начале перехода. В противном случае интерполятор выбирается на основе типа целевого значения, используя следующий алгоритм:

Если значение — число, используется interpolateNumber.
Если значение — цвет или строка, преобразуемая в цвет, используется interpolateRgb.
Используется interpolateString.

Для применения другого интерполятора используйте переход.styleTween.

переход.styleTween(имя[, фабрикатор[, приоритет]]) · Источник

Если factory указан и не равен null, то устанавливает стиль tween для стиля с указанным name для указанного интерполятора factory. Фабрика интерполятора — это функция, возвращающая интерполятор; когда начинается переход, factory вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), с this как текущий элемент DOM. Возвращаемый интерполятор затем вызывается для каждой фазы перехода в порядке, получая сглаженное время t, обычно в диапазоне [0, 1]. Наконец, возвращаемое значение интерполятора используется для установки значения стиля с указанным priority. Интерполятор должен возвращать строку. (Чтобы удалить стиль в начале перехода, используйте transition.style; чтобы удалить стиль в конце перехода, используйте transition.on для прослушивания события end.)

Если указанный factory равен null, удаляет ранее назначенный стиль tween указанного name, если таковой имеется. Если factory не указан, возвращает текущую фабрику интерполятора для стиля с указанным name или undefined, если такой tween не существует.

Например, чтобы интерполировать стиль fill от красного до синего:

transition.styleTween("fill", function() {
  return d3.interpolateRgb("red", "blue");
});

Или, чтобы интерполировать от текущего fill до синего, как transition.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

Для каждого выбранного элемента устанавливает содержание текста на указанное целевое значение value в начале перехода. Значение value может быть задано либо как константа, либо как функция. Если функция, она сразу вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), с this как текущий элемент DOM. Возвращаемое значение функции затем используется для установки содержания текста каждого элемента. Значение null очистит содержимое.

Чтобы интерполировать текст, а не устанавливать его в начале, используйте transition.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() {
  const i = d3.interpolateRgb(this.getAttribute("fill"), "blue");
  return function(t) {
    this.setAttribute("fill", i(t));
  };
});

Этот метод полезен для задания пользовательского интерполятора или для выполнения побочных эффектов, например, для анимации смещения прокрутки.

Временные характеристики

Сглаживание (easing), задержка (delay) и продолжительность (duration) перехода настраиваются. Например, задержка на элемент может использоваться для стаггирования переупорядочения элементов, улучшая восприятие. См. Animated Transitions in Statistical Data Graphics для рекомендаций.

transition.delay([value]) · Source

Для каждого выбранного элемента устанавливает задержку перехода на указанное значение в миллисекундах. Значение value может быть задано как константа или как функция. Если функция, она сразу вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), с this как текущий элемент DOM. Возвращаемое значение функции затем используется для установки задержки перехода каждого элемента. Если задержка не указана, она по умолчанию равна нулю.

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

Установка задержки на кратное индексу i — удобный способ стаггирования переходов по набору элементов. Например:

transition.delay(function(d, i) { return i * 10; });

Конечно, вы также можете вычислить задержку как функцию данных или отсортировать выборку перед вычислением задержки на основе индекса.

transition.duration([value]) · Source

Для каждого выбранного элемента устанавливает продолжительность перехода на указанное значение в миллисекундах. Значение value может быть задано как константа или как функция. Если функция, она сразу вычисляется для каждого выбранного элемента в порядке, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), с this как текущий элемент DOM. Возвращаемое значение функции затем используется для установки продолжительности перехода каждого элемента. Если продолжительность не указана, она по умолчанию равна 250 мс.

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

transition.ease([value]) · Source

Устанавливает функцию сглаживания (easing function) для всех выбранных элементов. Значение value должно быть задано как функция. Функция сглаживания вызывается для каждой фазы анимации, получая нормированное время t в диапазоне [0, 1]; она затем должна вернуть сглаженное время tʹ, которое обычно также находится в диапазоне [0, 1]. Хорошая функция сглаживания должна возвращать 0, если t = 0, и 1, если t = 1. Если функция сглаживания не задана, она по умолчанию равна d3.easeCubic.

Если значение не указано, возвращает текущую функцию сглаживания для первого (не нулевого) элемента в переходе. Это обычно полезно только если вы знаете, что переход содержит ровно один элемент.

transition.easeVarying(factory) Source

Задает фабрику для функции сглаживания (easing function) перехода. factory должна быть функцией. Она вызывается для каждого узла выбора, получая текущие данные (d), текущий индекс (i) и текущую группу (nodes), с this как текущий элемент DOM. Она должна возвращать функцию сглаживания.

Управление потоком

Для расширенного использования переходы предоставляют методы для пользовательского управления потоком.

transition.end() · Source

Возвращает обещание, которое выполняется, когда каждый выбранный элемент завершает переход. Если переход любого элемента отменяется или прерывается, обещание отклоняется.

transition.on(typenames[, listener]) · Source

Добавляет или удаляет слушатель для каждого выбранного элемента для указанного события typenames. typenames — это один из следующих типов событий в виде строки:

start - когда начинается переход.
end - когда переход завершается.
interrupt - когда переход прерывается.
cancel - когда переход отменяется.

См. Жизненный цикл перехода для более подробной информации. Обратите внимание, что это не события DOM, реализованные в selection.on и selection.dispatch, а события перехода!

Тип может быть необязательно последован точкой (.) и именем; необязательное имя позволяет регистрировать несколько обратных вызовов для приема событий одного типа, таких как start.foo и start.bar. Для указания нескольких типов имен разделяйте типы имен пробелами, например, interrupt end или start.foo start.bar.

Когда на выбранном узле отправляется указанное событие перехода, указанный слушатель будет вызван для элемента перехода, получив текущее значение данных (d), текущий индекс (i) и текущую группу (nodes), при этом this будет текущим элементом DOM. Слушатели всегда видят последние данные для своего элемента, но индекс является свойством выбора и фиксируется при назначении слушателя; для обновления индекса переназначьте слушателя.

Если ранее был зарегистрирован обработчик событий для того же typename на выбранном элементе, старый обработчик удаляется перед добавлением нового. Чтобы удалить слушателя, передайте null в качестве listener. Чтобы удалить все слушатели для данного имени, передайте null в качестве listener и .foo в качестве typename, где foo — это имя; чтобы удалить все слушатели без имени, укажите . в качестве typename.

Если listener не указан, возвращает текущего назначенного слушателя для указанного события typename на первом (не равном null) выбранном элементе, если таковой имеется. Если указано несколько типов имен, возвращается первый соответствующий слушатель.

transition.each(function) · Исходный код

Вызывает указанную функцию для каждого выбранного элемента, передавая текущее значение данных (d), текущий индекс (i) и текущую группу (nodes), при этом this — текущий элемент DOM. Этот метод может использоваться для вызова произвольного кода для каждого выбранного элемента и полезен для создания контекста доступа к родительским и дочерним данным одновременно. Эквивалентно selection.each.

transition.call(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() · Исходный код

Возвращает true, если этот переход не содержит элементов (не равных null). Эквивалентно selection.empty.

transition.nodes() · Исходный код

Возвращает массив всех элементов (не равных null) в этом переходе. Эквивалентно selection.nodes.

transition.node() · Исходный код

Возвращает первый (не равный null) элемент в этом переходе. Если переход пустой, возвращает null. Эквивалентно selection.node.

transition.size() · Исходный код

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