Ho scritto uno script per visualizzare graficamente alcuni dati orientati alla riga, con barre, etichette e connessioni tra le righe. Quando il set di dati è cresciuto, l'elemento SVG risultante ha superato le dimensioni dello schermo. Per mantenere il risultato su una schermata (in parte per rendere più semplice la gestione dello zoom di d3 da parte dell'utente), ho ridimensionato l'elemento SVG prima di disegnarlo in modo che si adattasse allo schermo. L'ho fatto aggiungendo un attributo transform/scale all'elemento SVG.Come specificare il livello di zoom iniziale in D3?
Il problema è, behavior.zoom di d3 non sa su questo cambio di scala, in modo che quando comincio a diminuire, si resetta prima scala a 1. C'è un modo per cambiare la scala iniziale behavior.zoom di d3 ?
EDIT: aggiunta una soluzione alternativa
kludged questo moltiplicando d3.event.scale dalla scala iniziale nella funzione() ridisegno. Quindi, prima dichiarazione di elemento SVG è
var SVG = d3.select('#timeline')
.append('svg:svg')
.attr('class','chart')
.attr('transform','scale('+bscale+')')
.attr('width', wwidth)
.attr('height', wheight)
.call(d3.behavior.zoom()
.extent([[0,Infinity],[0,Infinity],[0,Infinity]])
.on('zoom', redraw));
e
function redraw() {
SVG.attr("transform",
"translate(" + d3.event.translate + ")"
+ "scale(" + d3.event.scale * bscale + ")");
};
Sfortunatamente, l'API d3 [https://github.com/mbostock/d3/wiki/API-Reference] non ha una pagina per questo. C'è un esempio online che mostra lo zoom() in uso? – August
Trovato questo: https://github.com/mbostock/d3/pull/488 – August
cosa dovrebbe essere 'currentScale'? – vsync