D3.js - Transizione
La transizione è il processo di passaggio da uno stato all'altro di un elemento. D3.js fornisce un filetransition()metodo per eseguire la transizione nella pagina HTML. Impariamo a conoscere la transizione in questo capitolo.
Il metodo Transition ()
Il metodo transizione () è disponibile per tutti i selettori e avvia il processo di transizione. Questo metodo supporta la maggior parte dei metodi di selezione come - attr (), style (), ecc. Ma non supporta i metodi append () e data (), che devono essere chiamati prima del metodo transizione (). Inoltre, fornisce metodi specifici per la transizione come duration (), ease (), ecc. Una transizione semplice può essere definita come segue:
d3.select("body")
.transition()
.style("background-color", "lightblue");Una transizione può essere creata direttamente utilizzando il metodo d3.transition () e quindi utilizzata insieme ai selettori come segue.
var t = d3.transition()
.duration(2000);
d3.select("body")
.transition(t)
.style("background-color", "lightblue");Un esempio minimo
Creiamo ora un esempio di base per capire come funziona la transizione.
Crea un nuovo file HTML, transition_simple.html con il seguente codice.
<!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>Qui abbiamo selezionato il file bodyelement e quindi ha avviato la transizione chiamando il metodo transaction (). Quindi, abbiamo ordinato di far passare il colore di sfondo dal colore corrente,white per light blue.
Ora, aggiorna il browser e sullo schermo, il colore di sfondo cambia da bianco a azzurro. Se vogliamo cambiare il colore di sfondo da azzurro a grigio, possiamo usare la seguente transizione:
d3.select("body").transition().style("background-color", "gray");