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?

有帮助吗?

解决方案

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

return projection([-97, 40]);
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top