D3.js - API переходов

D3 Переходы берут набор элементов и для каждого элемента; он применяет переход к части текущего определения элемента.

Настройка API

Вы можете настроить API перехода, используя следующий скрипт.

<script src = "https://d3js.org/d3-color.v1.min.js"></script>
<script src = "https://d3js.org/d3-dispatch.v1.min.js"></script>
<script src = "https://d3js.org/d3-ease.v1.min.js"></script>
<script src = "https://d3js.org/d3-interpolate.v1.min.js"></script>
<script src = "https://d3js.org/d3-selection.v1.min.js"></script>
<script src = "https://d3js.org/d3-timer.v1.min.js"></script>
<script src = "https://d3js.org/d3-transition.v1.min.js"></script>
<script>

</script>

Методы API перехода

Давайте подробно рассмотрим методы API перехода.

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

Давайте подробно обсудим различные элементы выбора.

selection.transition([name])- Этот метод используется для возврата нового перехода выбора с именем. Если имя не указано, возвращается ноль.
selection.interrupt([name]) - Этот метод используется для прерывания выбранных элементов перехода с именем и определен ниже.

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

d3.interrupt(node[, name]) - Этот метод используется для прерывания перехода указанного имени на указанный узел.
d3.transition([name]) - Этот метод используется для возврата нового перехода с указанным именем.
transition.select(selector) - Этот метод используется для выбора первого элемента, который соответствует указанному селектору, и возвращает переход к результирующему выбору, который определен ниже.

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

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

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

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

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

transition.merge(other)- Этот метод используется для объединения перехода с другим переходом. Это определено ниже.

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

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

Example - Рассмотрим следующий пример.

d3.selectAll(".body")
   .transition() 
   
   // fade to yellow.
   .style("fill", "yellow")
   .transition() 
   
   // Wait for five second. Then change blue, and remove.
   .delay(5000)
   .style("fill", "blue")
   .remove();

Здесь тело становится желтым и начинается всего за пять секунд до последнего перехода.

d3.active(node[, name]) - Этот метод используется для возврата перехода на указанном узле с именем.

Методы синхронизации

Давайте подробно рассмотрим методы API времени перехода.

transition.delay([value])- Этот метод используется для установки задержки перехода на указанное значение. Если функция оценивается для каждого выбранного элемента, она передается в текущую базу данных «d» и индекс «i» с контекстом в качестве текущего элемента DOM. Если значение не указано, возвращает текущее значение задержки для первого (ненулевого) элемента в переходе. Это определено ниже,

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

transition.duration([value])- Этот метод используется для установки длительности перехода на указанное значение. Если значение не указано, возвращает текущее значение продолжительности для первого (ненулевого) элемента в переходе.
transition.ease([value])- Этот метод используется для облегчения значения перехода для выбранных элементов. Функция замедления вызывается для каждого кадра анимации и передает нормализованное время «t» в диапазоне [0, 1]. Если значение не указано, оно возвращает текущую функцию замедления для первого (ненулевого) элемента перехода.

В следующей главе мы обсудим концепцию перетаскивания в d3.js.