D3.js - Übergang
Beim Übergang wird ein Element von einem Zustand in einen anderen geändert. D3.js bietet atransition()Methode zum Durchführen eines Übergangs in der HTML-Seite. Lassen Sie uns in diesem Kapitel etwas über den Übergang lernen.
Die Transition () -Methode
Die Transition () -Methode ist für alle Selektoren verfügbar und startet den Übergangsprozess. Diese Methode unterstützt die meisten Auswahlmethoden wie - attr (), style () usw. Sie unterstützt jedoch nicht die Methoden append () und data (), die vor der Transition () -Methode aufgerufen werden müssen. Außerdem werden übergangsspezifische Methoden wie Dauer (), Leichtigkeit () usw. bereitgestellt. Ein einfacher Übergang kann wie folgt definiert werden:
d3.select("body")
.transition()
.style("background-color", "lightblue");Ein Übergang kann direkt mit der Methode d3.transition () erstellt und dann zusammen mit den Selektoren wie folgt verwendet werden.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Ein minimales Beispiel
Lassen Sie uns nun ein grundlegendes Beispiel erstellen, um zu verstehen, wie der Übergang funktioniert.
Erstellen Sie eine neue HTML-Datei, transition_simple.html mit dem folgenden Code.
<!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>Hier haben wir die ausgewählt bodyElement und startete dann den Übergang durch Aufrufen der Transition () -Methode. Dann haben wir angewiesen, die Hintergrundfarbe von der aktuellen Farbe zu übertragen.white zu light blue.
Aktualisieren Sie nun den Browser und auf dem Bildschirm ändert sich die Hintergrundfarbe von Weiß zu Hellblau. Wenn wir die Hintergrundfarbe von hellblau nach grau ändern möchten, können wir den folgenden Übergang verwenden:
d3.select("body").transition().style("background-color", "gray");