¿Cómo especifico el nivel de zoom inicial en D3?

Question

He escrito una secuencia de comandos para mostrar gráficamente algunos datos orientados a filas, con barras, etiquetas y conexiones entre filas. A medida que el conjunto de datos ha crecido, el elemento SVG resultante ha excedido el tamaño de la pantalla. Para mantener el resultado en una pantalla (en parte, para facilitar el manejo del zoom d3), he escalado el elemento SVG antes de dibujar para que se ajuste a la pantalla. Hice esto agregando un atributo de transformación/escala al elemento SVG.

El problema es que el comportamiento de d3.zoom no sabe acerca de este cambio en la escala, por lo que cuando empiezo a hacer zoom, primero restablece la escala a 1. ¿Hay alguna manera de cambiar la escala inicial en el comportamiento de d3.zoom ?

---

EDIT: añadió un trabajo en torno

kludged esto multiplicando d3.event.scale por la escala inicial en la función() redibujo. Por lo tanto, la declaración inicial del elemento SVG es

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

y

function redraw() { 
    SVG.attr("transform", 
     "translate(" + d3.event.translate + ")" 
     + "scale(" + d3.event.scale * bscale + ")"); 
}; 

Answer 1

A partir de D3 2.8.0, la nueva d3.behavior.zoom le permite establecer la escala actual, por ejemplo,

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

Answer 2

Después de establecer el valor del zoom, debe llamar al evento del zoom para que los cambios aparezcan en la pantalla. 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 + ")"); } 

Answer 3

En v4 d3, puede utilizar:

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

ejemplo simple:

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

Espero que ayude.