Учебники

D3.js — Переход

Декабрь 25, 2018

Переход — это процесс перехода одного состояния в другое. D3.js предоставляет метод transition () для выполнения перехода на HTML-странице. Давайте узнаем о переходе в этой главе.

Метод transition ()

Метод transition () доступен для всех селекторов и запускает процесс перехода. Этот метод поддерживает большинство методов выбора, таких как — attr (), style () и т. Д. Но он не поддерживает методы append () и data (), которые необходимо вызывать перед методом transition (). Кроме того, он предоставляет методы, специфичные для перехода, такие как duration (), ease () и т. Д. Простой переход можно определить следующим образом: 

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

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

var t = d3.transition()
   .duration(2000);
d3.select("body")
   .transition(t)
   .style("background-color", "lightblue");

Минимальный пример

Давайте теперь создадим базовый пример, чтобы понять, как работает переход.

Создайте новый файл HTML, transition_simple.html со следующим кодом. 

<!DOCTYPE html>
<html>
   <head>
      <script type = "text/javascript" src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <h3>Simple transitions</h3>
      <script>
         d3.select("body").transition().style("background-color", "lightblue");
      </script>
   </body>
</html>

Здесь мы выбрали элемент body, а затем начали переход, вызвав метод transition (). Затем мы дали указание передать цвет фона текущего цвета, от белого до светло-голубого .

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

49
Share: