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多边形的坐标是坐标数组的数组（坐标本身是数组）。第一个数组表示shell，后面的数组表示空洞。所以我认为你的geoJson应该更像：

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

d3.geoPath（）返回错误：<path>属性d：预期的数字，＆＃34; M，ZM，ZM，ZM，Z＆＃34;

1 个答案: