Учебники

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

Март 22, 2018

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.transition ([name]) — Этот метод используется для возврата нового перехода выбора с именем. Если имя не указано, возвращается ноль.

selection.interrupt ([name]) — Этот метод используется для прерывания выбранных элементов перехода с именем и определен ниже. 

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

  • d3.interrupt (node ​​[, name]) — Этот метод используется для прерывания перехода указанного имени на указанном узле.

  • d3.transition ([имя]) — этот метод используется для возврата нового перехода с указанным именем.

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

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

d3.transition ([имя]) — этот метод используется для возврата нового перехода с указанным именем.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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]) — Этот метод используется для возврата перехода на указанном узле с именем.

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

Сроки Методы

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

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

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

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

  • transition.duration ([value]) — Этот метод используется для установки продолжительности перехода в указанное значение. Если значение не указано, возвращает текущее значение длительности для первого (не нулевого) элемента в переходе.

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

transition.duration ([value]) — Этот метод используется для установки продолжительности перехода в указанное значение. Если значение не указано, возвращает текущее значение длительности для первого (не нулевого) элемента в переходе.

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

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

40
Share: