¿Cómo obtengo mi mapa D3 para acercarme a una ubicación?

Estoy trabajando con D3 y hasta ahora he podido modificar el ejemplo de chloropleth para que solo dibuje un estado específico. Esto implicó simplemente eliminar todos los demás datos del polígono para que me quede con el estado que necesito.¿Cómo obtengo mi mapa D3 para acercarme a una ubicación?

empecé con esto: enter image description here

y luego pellizcada cosas a esto: enter image description here

Sin embargo, lo que me gustaría hacer es auto pan/ampliar el mapa sobre la creación de modo que el el estado está al frente y al centro en la pantalla, así: enter image description here

¿Hago esto a través de la biblioteca D3? o algún código independiente (actualmente tengo jquery-svgpan ejecutándose con d3 para permitir el barrido manual/zoom) para que esto suceda?

Fuente

2012-09-17 Dillie-O

La forma más fácil de abordar esto, que he encontrado, es establecer una transformación en el elemento g que contiene los estados (#states en el ejemplo), según el recuadro delimitador del estado al que se hace zoom:

// your starting size 
var baseWidth = 600; 

d3.selectAll('#states path') 
    .on('click', function(d) { 
     // getBBox() is a native SVG element method 
     var bbox = this.getBBox(), 
      centroid = [bbox.x + bbox.width/2, bbox.y + bbox.height/2], 
      zoomScaleFactor = baseWidth/bbox.width, 
      zoomX = -centroid[0], 
      zoomY = -centroid[1]; 

     // set a transform on the parent group element 
     d3.select('#states') 
      .attr("transform", "scale(" + scaleFactor + ")" + 
       "translate(" + zoomX + "," + zoomY + ")"); 
    });

Hay mucho más que puede hacer para limpiarlo - dar cierto margen para el zoom final, comprueba si debe basar el zoom de la anchura o la altura, cambiar la anchura del trazo en función de zoom, la animación de las transición, etc., pero ese es el concepto básico.

Fuente

2012-09-19 16:49:49 nrabinowitz

¡Excelente! Encontré parte del código de transformación el otro día en el sitio D3 y eso me ha ayudado con mi punto de vista nacional, pero voy a trabajar en esto en las vistas de estado individuales y se lo haré saber. –

¿Cómo llamaría mi escala/transformación después de que el d3 haya terminado de cargar el mapa? Sabré la ruta específica que necesito para obtener el cuadro delimitador (estoy aplicando Ids) y me gustaría obtener una vista más amplia de inmediato en lugar de confiar en un evento de clic. Como solo estoy procesando una ruta, ¿podría usar el método .enter en lugar de .on? Todavía me estoy acostumbrando a D3 –

Podría, pero en general esto sería algo que haría en la actualización, ya que tendría que volver a hacerlo cada vez que quisiera cambiar el estado o alejarse. – nrabinowitz

¿Cómo obtengo mi mapa D3 para acercarme a una ubicación?

Respuesta

Cuestiones relacionadas