D3.js - Transitions API

Przejścia D3 pobierają wybór elementów i dla każdego elementu; stosuje przejście do części aktualnej definicji elementu.

Konfigurowanie API

Interfejs API przejścia można skonfigurować za pomocą następującego skryptu.

<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>

Metody interfejsu API przejścia

Przyjrzyjmy się szczegółowo metodom Transition API.

Wybór elementów

Omówmy szczegółowo różne wybrane elementy.

selection.transition([name])- Ta metoda służy do zwracania nowego przejścia wyboru z nazwą. Jeśli nazwa nie jest określona, zwraca wartość null.
selection.interrupt([name]) - Metoda ta służy do przerywania wybranych elementów przejścia nazwą i jest zdefiniowana poniżej.

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

d3.interrupt(node[, name]) - Ta metoda służy do przerwania przejścia o określonej nazwie w określonym węźle.
d3.transition([name]) - Ta metoda służy do zwracania nowego przejścia o określonej nazwie.
transition.select(selector) - Ta metoda służy do wybierania pierwszego elementu, który pasuje do określonego selektora i zwraca przejście w wyniku wyboru, który jest zdefiniowany poniżej.

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

transition.selectAll(selector)- Ta metoda służy do wybierania wszystkich elementów, które pasują do określonego selektora, i zwraca przejście w wyniku wyboru. Jest zdefiniowany poniżej -

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

transition.filter(filter) - Ta metoda służy do wyboru elementów pasujących do określonego filtra, zdefiniowano je poniżej.

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

transition.merge(other)- Ta metoda służy do scalenia przejścia z innym przejściem. Jest zdefiniowany poniżej.

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

transition.transition()- Ta metoda służy do zwracania nowego przejścia dla wybranych elementów. Planowane jest rozpoczęcie po zakończeniu przejścia. Nowe przejście dziedziczy nazwę, czas trwania i wygładzanie tego przejścia.

Example - Rozważmy następujący przykład.

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

Tutaj ciało zmienia kolor na żółty i zaczyna się zaledwie pięć sekund przed ostatnim przejściem.

d3.active(node[, name]) - Ta metoda służy do zwracania przejścia na określonym węźle o nazwie.

Metody pomiaru czasu

Przyjrzyjmy się szczegółowo metodom API synchronizacji czasu przejścia.

transition.delay([value])- Ta metoda służy do ustawiania opóźnienia przejścia na określoną wartość. Jeśli funkcja jest oceniana dla każdego wybranego elementu, jest przekazywana do aktualnego punktu odniesienia „d” i indeksu „i”, z kontekstem jako bieżącym elementem DOM. Jeśli wartość nie jest określona, zwraca bieżącą wartość opóźnienia dla pierwszego (niezerowego) elementu w przejściu. Jest zdefiniowany poniżej,

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

transition.duration([value])- Ta metoda służy do ustawiania czasu trwania przejścia na określoną wartość. Jeśli wartość nie jest określona, zwraca bieżącą wartość czasu trwania dla pierwszego (niezerowego) elementu przejścia.
transition.ease([value])- Ta metoda służy do ułatwienia wartości przejścia dla wybranych elementów. Funkcja wygładzania jest wywoływana dla każdej klatki animacji i przechodzi przez znormalizowany czas „t” z zakresu [0, 1]. Jeśli wartość nie jest określona, zwraca bieżącą funkcję zmiany dynamiki dla pierwszego (niezerowego) elementu przejścia.

W następnym rozdziale omówimy koncepcję przeciągania i upuszczania w d3.js.