d3/topojson 无法获取路径元素的质心答案

【问题标题】：d3/topojson Cannot get centroid of path elementd3/topojson 无法获取路径元素的质心
【发布时间】：2014-03-14 04:41:34
【问题描述】：

我有一个用于生成地图的美国 JSON 文件。路径可以很好地生成状态，但现在我想在每个路径/状态的中心添加状态名称。

这是一个 JSON 文件的例子

var usa = {"type": "FeatureCollection",
"features": [{ "type": "Feature", "properties": { "NAME": "Alabama"}, "geometry": { "type": "MultiPolygon", "coordinates": [ [ [ [ -88.124658, 30.283640 ]...

我通过附加到我已经创建的 SVG 来创建状态

var allStates = svg.selectAll("path")
  .data(usa.features)
  .enter()
  .append("path")
  .attr("d", path)

这是我尝试将州名添加为文本的地方

var allStatesNames = svg.selectAll('text')
  .data(usa.features)
  .enter().append("svg:text")
  .attr("transform", function(d) {
    return "translate(" + path.centroid(d.geometry.coordinates) + ")"; })
  .text(function(d) {return d.properties.NAME})

但我只是不断得到这个回来

<text transform="translate(NaN,NaN)">Virginia</text>

为什么我会得到 NaN，我应该改用什么？

提前感谢您的帮助！

【问题讨论】：

标签： javascript d3.js topojson

【解决方案1】：

所以问题是 path.centroid 需要形状的类型和坐标，所以你不能只传递坐标。实际上，您可以使用 d 传递整个功能。

尝试将 path.centroid(d) 放在你的变换属性的返回中，它应该适合你。似乎 path.centroid(d.geometry) 也可以，但不太正确。

【讨论】：

path.centroid() 实际上有一个功能，所以你需要做path.centroid(d)。
确实如此——看起来它们都可以工作。感谢您的提醒！