d3.js (d.geometry.coordinates) 放置标签时出现问题

Question

我正在尝试使用 larskotthoff 块页面放置标签 http://bl.ocks.org/larskotthoff/11406992

我遇到的问题是标签翻译的位置。

.attr("transform", function (d) {
            return "translate(" + projection(d.geometry.coordinates[0][0][0]) + ")";
     })

所以在他的指南中他没有做 d.geometry.coordinates[0][0][0] 而只是 d.geometry.coordinates。这对他有用，因为他没有计算出多边形的标签，因为当我在没有 [0][0][0]

的情况下尝试时

所以我的标签不在应有的位置，如下图所示。

虽然我已经设法让标签绘制我的功能结构（在本例中为 d）是不同的，而不是单一的坐标数组。它是一个 3 维数组。因此，由于这个原因，放置（翻译）是基于每个维度的第一个元素 [0][0][0] 发生的。我该如何克服这个问题？我希望它从整组多边形计算出它的位置。 d3 是否为此提供了一些东西？

更新：解决方案（感谢 Lars）

                          .data(json.features)
                      .enter().append("text")
                      .attr("class", "place-label")
                      .attr("transform", function (d) {
                          console.log("test");
                          return "translate(" + path.centroid(d) + ")";
                      })
                      .attr("x", function (d) {
                          return path.centroid(d)[0] > -1 ? 6 : -6;
                      })
                      .attr("dy", ".35em")
                      .style("text-anchor", function (d) {
                          return path.centroid(d)[0] > -1 ? "start" : "end";
                      })

Answer 1

正如 Lars Kotthoff 在评论中确认的那样。要从 node/feature 获取中心位置，您可以使用 path.centroid，如下面的 d3 文档中所述。

Path.centroid

d3.js (d.geometry.coordinates) 放置标签时出现问题

d3.js (d.geometry.coordinates) issue when placing labels

javascript

d3.js

label