d3.js 未正确呈现 geojson 数据

Question

我一直在努力尝试让 d3.js 将 geoJSON 数据正确渲染到 SVG 中。以下 JSFiddle 显示了问题

您会注意到 fiddle 的结果在灰色背景上生成一个白色对象，但它应该在白色背景上显示一个灰色对象。基本上它在地图的其余部分将所需的形状显示为一个洞。我一直在尝试显示这些形状中的多个，但因此它们相互重叠，我只看到最后一个。我正在从 SQL 服务器中的地理字段中提取数据，将其转换为 geoJSON 并将其传递到此页面。有些形状可以正确渲染，但有些则不能，而且我还没有找到模式。我已经使用 http://geojsonlint.com/ and http://geojson.io 验证了 geoJSON，它们显示正确。

我的 javascript 代码如下所示：

$(function() {

var mapData = JSON.parse('{"type": "FeatureCollection", "features": 
[{"type": "Feature", "properties": {"name": "Bear Lake Schools"}, "geometry":{"type": "MultiPolygon","coordinates":[[[[-86.070382504247434,44.425073643644744],
...
[-86.171655793200145,44.374257397888158]]]] }}]}');

var svg = d3.select("svg");
var width = 960;
var height = 600;

var projection = d3.geoMercator().scale(4000).center([-83, 43]);
var path = d3.geoPath().projection(projection);

svg.attr("width", width).attr("height", height)

svg.append("g")
  .classed('map-layer', true)
  .selectAll("path")
  .data(mapData.features)
  .enter().append("path")
  .attr("d", path);
});

我需要做什么才能正确显示它？

Answer 1

在从SQL服务器获取数据时的SELECT语句中，我在子句中添加了ReorientObject()，如下所示。然后我的形状就正常出现了。

SELECT Location.ReorientObject().STAsText() AS WKT FROM MyTable

d3.js 未正确呈现 geojson 数据

d3.js not rendering geojson data correctly

geojson

d3.js