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");