2013-06-19 19 views
9

Sto usando d3.behavior per collegare un evento di zoom al mio SVG, quindi viene utilizzata la rotellina del mouse Posso ottenere un evento di zoom con traslazione e scala che poi uso per impostare l'attributo transform dell'elemento.D3js: Come si cancella la scala di zoom impostata dall'evento d3.zoom?

Sembra che il valore di zoom.scale sia persistente da qualche parte così ogni volta che si utilizza la rotellina del mouse, esso contiene sempre il valore di zoom corretto, tenendo conto di tutti gli eventi di zoom precedenti. Questo è bello, ma ho bisogno di un modo per cancellare quel valore, ad esempio un pulsante di zoom di reset. Quando l'utente ha fatto clic sul pulsante, la volta successiva che scorre per eseguire lo zoom, l'elemento verrà ridimensionato nuovamente dalle dimensioni originali.

Quindi dove memorizza D3 questo valore e come lo si ripristina?

UPDATE:
Questa domanda ha anche un altro aspetto in esso: se a livello di codice impostato il "trasformare" l'attributo di fare una trasformazione di scala, l'evento dello zoom non tenerne conto. Quindi, se in seguito utilizzo la rotellina del mouse per lo zoom, mi sto avvitando perché posso cestinare la trasformazione originale. Quindi ho bisogno di un modo per impostare in modo programmato, non solo per resettare, il valore "translate" e "scale" dell'evento zoom, ovunque sia memorizzato.

+1

Nota questo commento di qualcuno con un problema simile sul forum del gruppo google d3: https://groups.google.com/d/msg/d3-js/-qUd_jcyGTw/ksHIZi7baCsJ – mg1075

risposta

12

La scala di zoom è memorizzata nell'oggetto zoom. Sto indovinando si dispone di una riga di codice che assomiglia:

var zoom = d3.behavior.zoom() 

Ottenere la scala da quell'oggetto è semplice:

zoom.scale() 

per diminuire x2:

zoom.scale(zoom.scale()/2) 

Traduzione funziona allo stesso modo, con zoom.translate() e zoom.translate([x, y]) per ottenere e impostare.

Per mantenere la visualizzazione di trasformazione in sincronia con lo zoom, è sufficiente assicurarsi che quando si aggiorna uno, l'altro viene anche aggiornato.

+2

https://github.com/ mbostock/d3/wiki/Zoom-Behaviour –

+0

Questo è fantastico! C'è un modo per ottenere questo oggetto dall'oggetto evento? O devo definire esplicitamente e maneggiarlo come var? –

+0

Ah, non importa, ho capito, è l'oggetto d3.event.target. Grazie per la tua risposta :) –

Problemi correlati