d3.geoPath() returns Error: <path> attribute d: Expected number, "M,ZM,ZM,ZM,Z"

Question

Edit: recreated the logic on jsfiddle https://jsfiddle.net/exLtcgrq/1/

I am trying to parse a simple GeoJSON file to D3 using the D3 V4 API.

My GeoJSON is simple:

{ "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"
      }
    }
  ]
}

I load thus using the d3.json() method and try using the d3-geo api to convert it to a path with this code:

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")
      });

The console output on chrome tells me the following

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

Any suggestions what is going wrong with using the geoPath method is highly appreciated.

Thank you.

Answer 1

Coordinates for geoJson polygons are an array of coordinate arrays (with the coordinates themselves being arrays). The first array indicates the shell, following arrays indicate holes. So I think your geoJson should look more like:

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