如何向 d3 生成的凸包添加标签？

Question

我使用 d3 v4 和 this technique（稍作修改）在力导向图中的节点周围绘制了一个凸包。效果很好，但现在我想标记这些节点组。最后，我想画一些看起来像this SVG 的东西。是否可以将文本元素添加到凸空多边形，以便它会随着多边形的移动而移动，或者我是否需要创建某种单独的分组？

Answer 1

我会这样处理这个问题：

• 从点创建凸包多边形
• 使用 d3.geom 或 d3.polygon（取决于版本）找到该多边形的质心
• 用新坐标更新一些文本

在 d3 v4 中，这看起来像：

var polygon = d3.polygonHull(vertices); 

然后你找到质心：

var centroid = d3.polygonCentroid(polygon);

并更新文本：

text.attr("transform","translate("+ centroid +")")

---

在 d3v3 和 v2 中，代码可能看起来更像：

var polygon = d3.geom.polygon(d3.geom.hull(vertices));
var centroid = polygon.centroid();
text.attr("transform","translate("+centroid+")");

---

至于一次更新多个文本，有很多潜在的方法可以做到这一点，所以我不会在这里讨论它。

这是在 v4 中更新的 single text 元素的示例。