Transizioni D3 - pausa e ripristino

Question

Sto cercando di capire "pausa" e "riprendi" per le transizioni D3 da questo guide. Mentre capisco come funziona 'pause', sono un po 'perso quando si tratta di' riprendere '. Non ho potuto dare un senso alla spiegazione dell'autore, in particolare la 'lineare' o prima riprendere la spiegazione. La mia domanda è che cosa fa esattamente e.attr("T",0); e .attr("T",1);?

Mi candido la funzionalità di ripresa di una testina video o forma d'onda esempio qui: jsfiddle

Answer 1

Il codice attributi e.attr("T",0) e .attr("T",1) set per il nodo selezionato. Cioè, viene creato e impostato un nuovo attributo "T". Lo scopo di questo è puramente per facilitare l'arresto e il ripristino - 0 rappresenta una transizione prima dell'inizio e 1 alla fine.

Se questo attributo è incluso nella transizione, il valore passerà gradualmente da 0 a 1. Come indicato dall'autore del tutorial, questo può essere utilizzato per ottenere lo stato della transizione in qualsiasi momento nel tempo - hai semplicemente bisogno di interrogare il valore di "T". Se si salva anche la transizione particolare, è possibile utilizzare il valore per mettere in pausa e riprendere in qualsiasi momento.

Nota che non c'è niente di speciale in "T". È possibile utilizzare qualsiasi nome di attributo (non utilizzato). Lo scopo è solo quello di avere un modo per dire fino a che punto la transizione è progredita.

Answer 2

Sono stato alle prese con questo problema esatto e penso che ci sia un errore di battitura nell'esempio che mi ha buttato fuori. Dove l'autore scrive:

var e = d3.select("#time"); 
e.attr("T",0); 

c.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

Sembra come se e aggiornerà il suo attributo T come c transizioni, che non ha senso. Invece penso che dovrebbe essere la seguente:

var e = d3.select("#time"); 
e.attr("T",0); 

e.transition() 
    .duration(time) 
    .ease("linear") 
    .attr("T",1); 

Ora selezionare l'elemento #time, impostare il valore iniziale del suo attributo T-0 quindi aggiungere una transizione verso lo stesso elemento che cambia T-1 nel corso del la durata specificata.