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]

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

Map photo

虽然我设法得到标签绘制我的特征结构（在这种情况下为d）是不同的，而不是单个坐标数组。它是一个三维数组。因此，基于每个维度的第一个元素[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在评论中证实。要从节点/功能获取中心位置，您可以使用path.centroid，如下面的d3文档中所述。

Path.centroid

放置标签时d3.js（d.geometry.coordinates）问题

1 个答案: