Path Generator
La función de proyección nos permite traducir las coordenadas de cualquier punto del globo a pixeles.
Como ya habíamos anticipado, para dibujar las fronteras del mapa, necesitamos un generador de camino.
Madagascar
Esta vez, usaremos Madagascar como ejemplo. En vez de copiar nuevamente el Feature Madagascar, lo ubicaremos en el archivo GeoJSON que contiene la totalidad de los países.
var madagascarFeature;
d3.json('/src/data/countries.geojson', function(error, data) {
if (error) { console.error(error); }
madagascarFeature = data.features.filter(function(d) {
return d.properties.sov_a3 === 'MDG';
}).pop();
});
Enseguida, graficamos un generador de caminos para graficar Madagascar:
var width = 600,
height = 300;
var projection = d3.geo.equirectangular()
.scale(width / (2 * Math.PI))
.translate([width / 2, height / 2]);
//Generador de caminos
//Observe pathGenerator(madagascarFeature) en la consola!
var pathGenerator = d3.geo.path().projection(projection);
var div = d3.select('#ejemplo-d01'),
svg = div.selectAll('svg').data([madagascarFeature]);
svg.enter().append('svg');
svg.attr('width', width).attr('height', height);
svg.exit().remove();
var pathMadagascar = svg.selectAll('path.mdg').data([madagascarFeature]);
pathMadagascar.enter().append('path')
.classed('mdg', true);
pathMadagascar
.attr('d', pathGenerator);
pathMadagascar.exit().remove();
Explorando la variable madagascarFeature en la consola, podemos centrar el gráfico y magnificar el tamaño de Madagascar manualmente. Sin embargo, esto se puede automatizar.
Centrado automático
var width = 600,
height = 300;
var geoCentroid = d3.geo.centroid(madagascarFeature);
var projection = d3.geo.equirectangular()
.scale(5 * width / (2 * Math.PI))
.translate([width / 2, height / 2])
.center(geoCentroid);
var pathGenerator = d3.geo.path().projection(projection);
var div = d3.select('#ejemplo-d02'),
svg = div.selectAll('svg').data([madagascarFeature]);
svg.enter().append('svg');
svg.attr('width', width).attr('height', height);
svg.exit().remove();
var pathMadagascar = svg.selectAll('path.mdg').data([madagascarFeature]);
pathMadagascar.enter().append('path')
.classed('mdg', true);
pathMadagascar
.attr('d', pathGenerator);
pathMadagascar.exit().remove();