使用D3.js查找SVG路径的Centroid

Question

这是一个问题的重新制作，因为人们没有正确阅读最后一个问题。我需要路径的实际加权质心。不仅仅是一个中心，这非常重要。

如何使用D3.js查找区域的质心。

SVG区域代码如下所示：

        <path id="JP" title="Japan" class="land" d="M852.76,362.01l0.36,1.15l-1.58,2.03l-1.15,-1.07l-1.44,0.78l-0.74,1.95l-1.83,-0.95l0.02,-1.58l1.55,-2l1.6,0.39l1.15,-1.42L852.76,362.01zM870.53,351.73l-1.06,2.78l0.49,1.73l-1.46,2.42l-3.58,1.6l-4.93,0.21l-3.99,3.84l-1.88,-1.29l-0.12,-2.52l-4.88,0.75l-3.32,1.59l-3.28,0.06l2.84,2.46l-1.87,5.61l-1.81,1.37l-1.36,-1.27l0.69,-2.96l-1.77,-0.96l-1.14,-2.28l2.65,-1.03l1.47,-2.11l2.82,-1.75l2.06,-2.33l5.58,-1.02l3,0.7l2.93,-6.17l1.87,1.67l4.11,-3.51l1.6,-1.38l1.76,-4.38l-0.48,-4.1l1.19,-2.33l2.98,-0.68l1.53,5.11l-0.08,2.94l-2.59,3.6L870.53,351.73zM878.76,325.8l1.97,0.83l1.98,-1.65l0.62,4.35l-4.16,1.05l-2.45,3.76l-4.41,-2.58l-1.52,4.12l-3.12,0.06l-0.39,-3.74l1.39,-2.94l3,-0.21l0.82,-5.38l0.83,-3.09l3.3,4.12L878.76,325.8z"/>

那么我如何在质心上放置一个DOT / Icon等，以便它在实际的svg上。

它需要是CENTROID，所以带有工作示例的小提琴示例会让我非常开心。

提前致谢

Answer 1

您可以通过基本平均计算得到质心：

var centroid= {x:0,y:0};
var pointCount=0;
for( var i=0; i< parsedPath.length; i++ ){
    var point= parsedPath[i];

    if( point.relative == true){
        if( i > 0 ){
            point.x += +parsedPath[i-1].x;
            point.y += +parsedPath[i-1].y;
        }
    }
    if( point.x && point.y ){

        centroid.x += point.x;
        centroid.y += point.y;

        placePoint(point , "blue" , 0.2 );

        pointCount++
    }else{
        // close pathes -> ignored
    }

}
centroid.x /= pointCount;
centroid.y /= pointCount;

但是，根据您的需要，这可能不是您想要的。 请参阅之前相关问题中的my answer。

The demo