使用 D3.js 查找 SVG 路径的质心答案

【问题标题】：Use D3.js to find Centroid of SVG Path使用 D3.js 查找 SVG 路径的质心
【发布时间】：2015-05-02 07:51:42
【问题描述】：

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

你如何使用 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，所以一个带有工作示例的小提琴示例会让我非常高兴。

提前致谢

【问题讨论】：

如果我没记错的话，Geo API github.com/mbostock/d3/wiki/Geo-Paths#path_centroid 里有一些东西，但不能帮助你更多。
ps，如果您的旧问题仍然有效，那么最好编辑它并关闭它。
谢谢 Kaiido，我知道下次我知道，但有人没有正确阅读问题，并将其标记为重复，并带有指向无效答案的链接。所以它现在已经有一段时间不活跃了，因为我猜人们认为它是重复的，它不是。
我也已经知道你给伙伴的链接，但它并不像看起来那么容易实现，这就是为什么我正在寻找一个可以用我给出的示例路径做一个简单的小提琴的人。
是this 的问题吗？如果是这样，它似乎没有被锁定，也没有to have been

标签： javascript svg d3.js

【解决方案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

【讨论】：

嗨，盖尔，那是一些相当不错的工作，我看到它在外面有一点点，在某些路径中不可能将它放在实际路径中吗？
我也想要！在这里，它是点的质心，一个解决方案可能是找到形状的质心。但困难在于处理分离的或非凸的形状。
嗯，你的例子对我来说很好，如果其他人提出更好的解决方案，我会再给它一点时间，如果没有，那么我会找到一种方法来与你的合作。谢谢盖尔
嗨 Gael，我正在尝试您的解决方案，但是当我在 1 条路径上测试时，它会拉出我们的路径，并在顶部制作一个巨大的版本。我如何简单地将点放在它所在的路径上？示例图片：i.imgur.com/PvbSZv2.png
删除/*fit the map to the svg element*/和var centroid ...之间的所有行:)