如何手动将点要素转换为 SVG 坐标答案

【问题标题】：How to manually convert point features to SVG coordinates如何手动将点要素转换为 SVG 坐标
【发布时间】：2013-06-27 04:00:16
【问题描述】：

我已经设置了d3.geo.path如下

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

我的任务涉及在世界地图上绘制饼图，我使用path.centroid() 将它们放置在大多数国家/地区，但是美国和俄罗斯等广泛分布的国家并没有提供好的结果（例如美国的饼图是在加拿大），因此我想为这些手动设置质心。这是我到目前为止的代码：

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

问题是这个函数在默认情况下返回类似于[487.25078795735465, 377.785536430209] 的东西（可以直接嵌入到SVG 元素的transform 属性中），但在上述特殊情况下返回类似于"M209.12490009048008,338.6477191773128m0,4.5a4.5,4.5 0 1,1 0,-9a4.5,4.5 0 1,1 0,9z" 的东西。在这些情况下，我该怎么做才能获得简单的 x 和 y 坐标？我想我可以使用 RegEx，但是对于这个问题没有更优雅的解决方案吗？

【问题讨论】：

标签： svg d3.js geo map-projections

【解决方案1】：

只需将自定义点传递给投影而不是路径，即

return projection([-97, 40]);

【讨论】：