Soy nuevo en d3: intentaré explicar cómo lo entiendo, pero no estoy seguro de haberlo entendido bien
El secreto es saber que algunos métodos funcionarán en el espacio cartográfico (latitud, longitud) y otros en el espacio cartesiano (x, y en la pantalla). El espacio cartográfico (nuestro planeta) es (casi) esférico, el espacio cartesiano (pantalla) es plano; para mapear uno sobre el otro necesita un algoritmo, que se llama proyección . Este espacio es demasiado corto para profundizar en el fascinante tema de las proyecciones y en cómo distorsionan las características geográficas para convertir el esférico en plano; algunos están diseñados para conservar ángulos, otros conservan distancias, etc. Siempre hay un compromiso (Mike Bostock tiene una gran colección de ejemplos ).
En d3, el objeto de proyección tiene una propiedad central / setter, dada en unidades de mapa:
projection.center ([ubicación])
Si se especifica el centro, establece el centro de la proyección en la ubicación especificada, una matriz de dos elementos de longitud y latitud en grados y devuelve la proyección. Si no se especifica el centro, devuelve el centro actual cuyo valor predeterminado es ⟨0 °, 0 °⟩.
También está la traducción, dada en píxeles, donde el centro de proyección se encuentra en relación con el lienzo:
projection.translate ([punto])
Si se especifica el punto, establece el desplazamiento de la traducción de la proyección en la matriz de dos elementos especificada [x, y] y devuelve la proyección. Si no se especifica el punto, devuelve el desplazamiento de la traducción actual que por defecto es [480, 250]. El desplazamiento de la traducción determina las coordenadas de píxel del centro de la proyección. El desplazamiento de traducción predeterminado coloca ⟨0 °, 0 °⟩ en el centro de un área de 960 × 500.
Cuando quiero centrar una característica en el lienzo, me gusta establecer el centro de proyección en el centro del cuadro delimitador de características; esto funciona para mí cuando uso mercator (WGS 84, utilizado en google maps) para mi país (Brasil), nunca probado usando otras proyecciones y hemisferios. Puede que tenga que hacer ajustes para otras situaciones, pero si logra estos principios básicos, estará bien.
Por ejemplo, dada una proyección y ruta:
var projection = d3.geo.mercator()
.scale(1);
var path = d3.geo.path()
.projection(projection);
El bounds
método de path
devuelve el cuadro delimitador en píxeles . Úselo para encontrar la escala correcta, comparando el tamaño en píxeles con el tamaño en unidades de mapa (0.95 le da un margen de 5% sobre el mejor ajuste para ancho o alto). Geometría básica aquí, calculando el ancho / alto del rectángulo dados las esquinas diagonalmente opuestas:
var b = path.bounds(feature),
s = 0.9 / Math.max(
(b[1][0] - b[0][0]) / width,
(b[1][1] - b[0][1]) / height
);
projection.scale(s);
Use el d3.geo.bounds
método para encontrar el cuadro delimitador en unidades de mapa:
b = d3.geo.bounds(feature);
Establezca el centro de la proyección en el centro del cuadro delimitador:
projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);
Use el translate
método para mover el centro del mapa al centro del lienzo:
projection.translate([width/2, height/2]);
En este momento, debería tener la función en el centro del mapa ampliada con un margen del 5%.