Question

我有一个美国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以及我应该使用什么呢？

提前感谢您的帮助！

Answer 1

所以问题是path.centroid既需要形状类型也需要坐标，所以你不能只传递坐标。实际上你可以用d。

传递整个功能

尝试将path.centroid（d）放在transform attr的返回中，它应该适合你。似乎path.centroid（d.geometry）也可以正常工作，但不太正确。

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

1 个答案: