D3.js - przejście
Przejście to proces przechodzenia z jednego stanu do drugiego elementu. D3.js zapewniatransition()metoda wykonania przejścia na stronie HTML. Dowiedzmy się o przejściu w tym rozdziale.
Metoda przejścia ()
Metoda przejście () jest dostępna dla wszystkich selektorów i rozpoczyna proces przejścia. Ta metoda obsługuje większość metod wyboru, takich jak - attr (), style () itp. Jednak nie obsługuje ona metod append () i data (), które należy wywołać przed metodą przejścia (). Ponadto zapewnia metody specyficzne dla przejścia, takie jak duration (), easy () itp. Proste przejście można zdefiniować w następujący sposób -
d3.select("body")
.transition()
.style("background-color", "lightblue");Przejście można utworzyć bezpośrednio za pomocą metody d3.transition (), a następnie użyć wraz z selektorami w następujący sposób.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Minimalny przykład
Stwórzmy teraz podstawowy przykład, aby zrozumieć, jak działa przejście.
Utwórz nowy plik HTML, transition_simple.html z następującym kodem.
<!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>Tutaj wybraliśmy bodyelement, a następnie rozpoczęto przejście przez wywołanie metody transit (). Następnie poinstruowaliśmy, aby przenieść kolor tła z bieżącego koloru,white do light blue.
Teraz odśwież przeglądarkę, a na ekranie kolor tła zmieni się z białego na jasnoniebieski. Jeśli chcemy zmienić kolor tła z jasnoniebieskiego na szary, możemy użyć następującego przejścia -
d3.select("body").transition().style("background-color", "gray");