geojson - d3.geoPath() 返回错误 : attribute d: Expected number, "M,ZM,ZM,ZM,Z"

Question

编辑:重新创建了 jsfiddle https://jsfiddle.net/exLtcgrq/1/ 上的逻辑

我正在尝试使用 D3 V4 API 将简单的 GeoJSON 文件解析为 D3。

我的 GeoJSON 很简单:

{ "type": "FeatureCollection",
  "features": [
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [10.0, 10.0], [60.0, 40.0], [50.0, 75.0],[20.0, 60.0]
        ]
      },
      "properties": {
        "id": "1",
        "Type": "campingspot"
      }
    },
    { "type": "Feature",
      "geometry": {
        "type": "Polygon",
        "coordinates": [
          [20.0, 65.0], [50.0, 80.0], [50.0, 110.0],[20.0, 115.0]
        ]
      },
      "properties": {
        "id": "1",
        "Type": "campingspot"
      }
    }
  ]
}

我使用 d3.json() 方法进行加载，并尝试使用 d3-geo api 将其转换为具有以下代码的路径:

var jsonData2 = d3.json("campingGeojson.json", function(error, json){
        svg.selectAll("path")
          .data(json.features)
          .enter()
          .append("path")
          .attr("d", d3.geoPath())
          .attr("stroke", "black")
          .attr("stroke-width", 1)
          .attr("fill", "green")
      });

chrome 上的控制台输出告诉我以下内容

Error: <path> attribute d: Expected number, "M,ZM,ZM,ZM,Z".

如果您对使用 geoPath 方法出现的问题提出任何建议，我们将不胜感激。

谢谢。

Answer 1

geoJson 多边形的坐标是坐标数组的数组(坐标本身就是数组)。第一个数组表示壳，后面的数组表示孔。所以我认为你的 geoJson 应该看起来更像:

"coordinates": [
 [ [10.0, 10.0], [60.0, 40.0], [50.0, 75.0],[20.0, 60.0] ]
    ]