Pergunta

I have set up a d3.geo.path as follows

// Projection
var projection = d3.geo.mercator().center([LONCENTER, LATCENTER]).scale(MAPSCALE);
// Path for projection
path = d3.geo.path().projection(projection);

My task involves plotting pie charts on a world map, and I am using path.centroid() to place them for most countries, but countries such as USA and Russia which are widespread do not render good results (e.g. the pie of USA being in Canada), thus I want to manually set centroids for these. This is the code I have so far:

function getCentroid(country){
if(id === 840){
    return path({ "type": "Point", "coordinates": [-97, 40] });
// Russia
} else if(id === 643){
    return path({ "type": "Point", "coordinates": [49, 60] });
// France   
} else if(id === 250){
    return path({ "type": "Point", "coordinates": [3, 47] });
}
// default case where the standard centroid can be used
} else {
    return path.centroid(country.datum().geometry);
}
}

The problem is that this function returns something like [487.25078795735465, 377.785536430209] for the default case (which can be directly embedded into the transform attribute of an SVG element) but something like "M209.12490009048008,338.6477191773128m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z" for the above special cases. What can I do in order to get simple x- and y-coordinates in these cases? I assume I could use RegEx but isn't there a more elegant solution to this problem?

Foi útil?

Solução

Just pass the custom points to the projection instead of the path, i.e.

return projection([-97, 40]);
Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top