D3.js - API Transitions

D3 Le transizioni prendono una selezione di elementi e per ogni elemento; applica una transizione a una parte della definizione corrente dell'elemento.

Configurazione dell'API

È possibile configurare l'API di transizione utilizzando il seguente script.

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

Metodi API di transizione

Esaminiamo in dettaglio i metodi dell'API di transizione.

Selezione di elementi

Parliamo in dettaglio dei vari elementi di selezione.

• selection.transition([name])- Questo metodo viene utilizzato per restituire una nuova transizione di selezione con il nome. Se non viene specificato un nome, restituisce null.

• selection.interrupt([name]) - Questo metodo viene utilizzato per interrompere gli elementi selezionati della transizione con il nome ed è definito di seguito.

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

• d3.interrupt(node[, name]) - Questo metodo viene utilizzato per interrompere la transizione del nome specificato sul nodo specificato.

• d3.transition([name]) - Questo metodo viene utilizzato per restituire una nuova transizione con il nome specificato.

• transition.select(selector) - Questo metodo viene utilizzato per selezionare il primo elemento che corrisponde al selettore specificato e restituisce una transizione sulla selezione risultante, definita di seguito.

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

• transition.selectAll(selector)- Questo metodo viene utilizzato per selezionare tutti gli elementi che corrispondono al selettore specificato e restituisce una transizione sulla selezione risultante. È definito di seguito:

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

• transition.filter(filter) - Questo metodo viene utilizzato per selezionare gli elementi che corrispondono al filtro specificato, sono definiti di seguito.

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

• transition.merge(other)- Questo metodo viene utilizzato per unire la transizione con un'altra transizione. È definito di seguito.

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

• transition.transition()- Questo metodo viene utilizzato per restituire una nuova transizione sugli elementi selezionati. È programmato per iniziare quando la transizione si interrompe. La nuova transizione eredita il nome, la durata e l'andamento della transizione.

Example - Consideriamo il seguente esempio.

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

Qui, il corpo sfuma in giallo e inizia solo cinque secondi prima dell'ultima transizione.

• d3.active(node[, name]) - Questo metodo viene utilizzato per restituire la transizione sul nodo specificato con il nome.

Metodi di temporizzazione

Esaminiamo in dettaglio i metodi API dei tempi di transizione.

• transition.delay([value])- Questo metodo viene utilizzato per impostare il ritardo di transizione sul valore specificato. Se una funzione viene valutata per ogni elemento selezionato, viene passata al dato corrente "d" e indice "i", con il contesto come elemento DOM corrente. Se non viene specificato un valore, restituisce il valore corrente del ritardo per il primo elemento (non nullo) nella transizione. È definito di seguito,

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

• transition.duration([value])- Questo metodo viene utilizzato per impostare la durata della transizione sul valore specificato. Se non viene specificato un valore, restituisce il valore corrente della durata per il primo elemento (non nullo) nella transizione.

• transition.ease([value])- Questo metodo viene utilizzato per facilitare il valore di transizione per gli elementi selezionati. La funzione di andamento viene richiamata per ogni fotogramma dell'animazione e viene passato il tempo normalizzato 't' nell'intervallo [0, 1]. Se un valore non viene specificato, restituisce la funzione di andamento corrente per il primo elemento (non nullo) nella transizione.

Nel prossimo capitolo, discuteremo il concetto di drag and drop in d3.js.