Question

我已设置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但是这个问题没有更优雅的解决方案吗？

Answer 1

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

return projection([-97, 40]);

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

1 个答案: