2011-12-30 28 views
11

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 + ")"); 
}; 

risposta

12

Come di D3 2.8.0, la nuova d3.behavior.zoom consente di impostare la scala corrente, ad esempio,

d3.behavior.zoom() 
    .scale(currentScale); 
+0

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

+0

Trovato questo: https://github.com/mbostock/d3/pull/488 – August

+5

cosa dovrebbe essere 'currentScale'? – vsync

0

Dopo aver impostato il valore di zoom, è necessario chiamare l'evento di zoom per visualizzare le modifiche sullo schermo. Here's how you do it:

//set the min and max extent to which zooming can occur and define a mouse zoom function 
var zoom = d3.behavior.zoom().scaleExtent([0.3, 3]).on("zoom", zoomed); 
zoom.translate([50,50]).scale(2);//translate and scale to whatever value you wish 
zoom.event(yourSVGlayer.transition().duration(50));//does a zoom 
//this function handles the zoom behaviour when you zoom with the mouse 
function zoomed() { yourSVGlayer.attr("transform", "translate("+d3.event.translate+")scale(" + d3.event.scale + ")"); } 
2

In d3 v4, è possibile utilizzare:

svg.call (zoom.transform, d3.zoomIdentity.scale (X_SCALE, Y_SCALE));

semplice esempio:

var zoom = d3.zoom() 
     .on("zoom", zoomed); 

var zoomer = svg.append("rect") 
     .call(zoom) 
     .call(zoom.transform, d3.zoomIdentity.scale(2,2)); 

function zoomed() { 
     svg.attr("transform", d3.event.transform); 
    } 

Speranza che aiuta.

Problemi correlati