d3.geoPath() 返回错误：<path> 属性 d：预期数字，“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] ]
    ]