Centre d'une carte en d3 donné un geoJSON objet

La suite semble faire environ ce que vous voulez. La mise à l'échelle semble être ok. Lors de l'application à ma carte il y a un petit décalage. Ce petit décalage est probablement causée parce que je utiliser la traduire de commande au centre de la carte, alors que je devrais utiliser le centre de commande.

1. Créer une projection et d3.geo.chemin
2. Calculer les limites de la projection actuelle
3. Utiliser ces valeurs pour calculer l'ampleur et de la traduction
4. Recréer la projection

Dans le code:

  var width  = 300;
var height = 400;
var vis = d3.select("#vis").append("svg")
.attr("width", width).attr("height", height)
d3.json("nld.json", function(json) {
//create a first guess for the projection
var center = d3.geo.centroid(json)
var scale  = 150;
var offset = [width/2, height/2];
var projection = d3.geo.mercator().scale(scale).center(center)
.translate(offset);
//create the path
var path = d3.geo.path().projection(projection);
//using the path determine the bounds of the current map and use 
//these to determine better values for the scale and translation
var bounds  = path.bounds(json);
var hscale  = scale*width  / (bounds[1][0] - bounds[0][0]);
var vscale  = scale*height / (bounds[1][1] - bounds[0][1]);
var scale   = (hscale < vscale) ? hscale : vscale;
var offset  = [width - (bounds[0][0] + bounds[1][0])/2,
height - (bounds[0][1] + bounds[1][1])/2];
//new projection
projection = d3.geo.mercator().center(center)
.scale(scale).translate(offset);
path = path.projection(projection);
//add a rectangle to see the bound of the svg
vis.append("rect").attr('width', width).attr('height', height)
.style('stroke', 'black').style('fill', 'none');
vis.selectAll("path").data(json.features).enter().append("path")
.attr("d", path)
.style("fill", "red")
.style("stroke-width", "1")
.style("stroke", "black")
});

Je suis nouveau sur d3 - allons essayer d'expliquer comment je le comprends mais je ne suis pas sûr que je suis tout à droite.

Le secret est de savoir que certaines méthodes fonctionnent sur la cartographique de l'espace (latitude,longitude) et d'autres sur l'espace cartésien (x,y sur l'écran). La cartographique de l'espace (notre planète) est (presque) de forme sphérique, l'espace cartésien (écran) est plat afin de cartographier l'un sur l'autre vous avez besoin d'un algorithme, qui est appelé projection. Cet espace est trop court pour en profondeur dans le sujet fascinant de projections et comment ils déforment les caractéristiques géographiques dans le but de transformer sphérique dans un avion; certains sont conçus pour assurer la conservation des angles, d'autres de conserver les distances et ainsi de suite - il y a toujours un compromis (Mike Bostock a un énorme collection d'exemples).

En d3, la projection de l'objet dispose d'un centre de propriété/définition, donnée dans les unités de la carte:

de projection.centre([lieu])

Si le centre est spécifié, définit centre de la projection à l'emplacement spécifié, un tableau à deux éléments de la longitude et de la latitude en degrés et retourne la projection. Si le centre n'est pas spécifié, retourne le centre actuel qui, par défaut, ⟨0°,0°⟩.

Il y a aussi la traduction, donnée en pixels - où le centre de projection des stands par rapport à la toile:

de projection.traduire([point])

Si le point est spécifié, définit la projection de la traduction de l'offset spécifié tableau à deux éléments [x, y] et retourne la projection. Si le point n'est pas spécifié, retourne la traduction de décalage par défaut [480, 250]. La traduction de décalage détermine les coordonnées en pixels du centre de la projection. La traduction par défaut offset lieux ⟨0°,0°⟩ au centre de 960×500 zone.

Quand je veux le centre d'une fonction dans la toile, j'aime le centre de projection du centre de la fonctionnalité de la boîte englobante - ce qui fonctionne pour moi lors de l'utilisation de mercator (WGS 84, utilisé dans google maps) pour mon pays (Brésil), jamais testé à l'aide d'autres projections et les hémisphères. Vous pourriez avoir à faire des ajustements pour d'autres situations, mais si vous le clou de ces principes de base, vous serez bien.

Par exemple, étant donné une projection et le chemin d'accès:

var projection = d3.geo.mercator()
.scale(1);
var path = d3.geo.path()
.projection(projection);

La bounds méthode de path retourne la boîte englobante en pixels. L'utiliser pour trouver la bonne échelle, la comparaison de la taille en pixels de la taille dans les unités de la carte (0.95 vous donne une marge de 5% sur le meilleur ajustement de la largeur ou de la hauteur). Géométrie de base ici, le calcul du rectangle de la largeur/hauteur compte tenu de la diagonale opposée coins:

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

Utiliser le d3.geo.bounds méthode pour trouver la boîte englobante dans les unités de la carte:

b = d3.geo.bounds(feature);

Définir le centre de la projection du centre de la boîte englobante:

projection.center([(b[1][0]+b[0][0])/2, (b[1][1]+b[0][1])/2]);

Utiliser le translate méthode pour déplacer le centre de la carte au centre de la toile:

projection.translate([width/2, height/2]);

Maintenant vous devriez avoir la caractéristique dans le centre de la carte agrandie avec une marge de 5%.

Il y a un (centre) méthode que vous pouvez utiliser qui accepte un lat/lon paire.

De ce que je comprends, translate() est utilisée uniquement pour l'littéralement déplacer les pixels de la carte. Je ne suis pas sûr de la façon de déterminer quelle est l'échelle.

En plus de Centre d'une carte en d3 donné un geoJSON objet, notez que vous pouvez préférer fitExtent() sur fitSize() si vous souhaitez spécifier un rembourrage autour des limites de votre objet. fitSize() définit automatiquement ce padding à 0.

Avec mbostocks de réponse, et d'Herbes Caudill commentaire, j'ai commencé à courir dans des problèmes avec l'Alaska depuis que j'ai été à l'aide d'une projection de mercator. Il est à noter que pour mes propres fins, je suis en train de projet et le centre des Etats-unis. J'ai trouvé que j'avais de marier les deux réponses avec Jan van der Laan réponse avec l'exception suivante pour les polygones qui se chevauchent hémisphères (polygones que l'extrémité avec une valeur absolue Est - Ouest qui est supérieure à 1):

1. créé une simple projection de mercator:

   projection = d3.geo.mercator().l'échelle(1).traduire([0,0]);

2. créer le chemin d'accès:

   path = d3.geo.path().la projection(la projection);

3.définir mes limites:

var bounds = path.bounds(topoJson),
dx = Math.abs(bounds[1][0] - bounds[0][0]),
dy = Math.abs(bounds[1][1] - bounds[0][1]),
x = (bounds[1][0] + bounds[0][0]),
y = (bounds[1][1] + bounds[0][1]);

4.Ajouter exception de l'Alaska et les états qui se chevauchent les hémisphères:

if(dx > 1){
var center = d3.geo.centroid(topojson.feature(json, json.objects[topoObj]));
scale = height / dy * 0.85;
console.log(scale);
projection = projection
.scale(scale)
.center(center)
.translate([ width/2, height/2]);
}else{
scale = 0.85 / Math.max( dx / width, dy / height );
offset = [ (width - scale * x)/2 , (height - scale * y)/2];
//new projection
projection = projection                     
.scale(scale)
.translate(offset);
}

J'espère que cette aide.

Comment je centrée sur un Topojson, où j'avais besoin de sortir de la fonction:

      var projection = d3.geo.albersUsa();
var path = d3.geo.path()
.projection(projection);
var tracts = topojson.feature(mapdata, mapdata.objects.tx_counties);
projection
.scale(1)
.translate([0, 0]);
var b = path.bounds(tracts),
s = .95 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height),
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection
.scale(s)
.translate(t);
svg.append("path")
.datum(topojson.feature(mapdata, mapdata.objects.tx_counties))
.attr("d", path)