D3.js - Переход
Переход - это процесс перехода элемента из одного состояния в другое. D3.js предоставляетtransition()метод для выполнения перехода на HTML-странице. Давайте узнаем о переходе в этой главе.
Метод transition ()
Метод transition () доступен для всех селекторов и запускает процесс перехода. Этот метод поддерживает большинство методов выбора, таких как - attr (), style () и т. Д. Но он не поддерживает методы append () и data (), которые необходимо вызывать перед методом transition (). Кроме того, он предоставляет методы, специфичные для перехода, такие как duration (), easy () и т. Д. Простой переход можно определить следующим образом:
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 (). Затем мы дали указание перенести цвет фона из текущего цвета,white к light blue.
Теперь обновите браузер, и на экране цвет фона изменится с белого на голубой. Если мы хотим изменить цвет фона с голубого на серый, мы можем использовать следующий переход -
d3.select("body").transition().style("background-color", "gray");