Question

我一直在努力获取d3.js以便将geoJSON数据正确呈现到SVG中。以下JSFiddle显示了问题

您会注意到，fiddle的结果在灰色背景上产生了白色对象，但应该在白色背景上显示灰色对象。基本上，它在地图的其余部分中将所需形状显示为孔。我一直在尝试显示这些形状中的多个，但是由于这些形状它们彼此重叠，因此我只能看到最后一个。我正在从SQL Server的地理位置字段中提取数据，将其转换为geoJSON并将其传递到此页面。一些形状可以正确渲染，但是其他形状不能，我还没有找到图案。我已经使用http://geojsonlint.com/和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 Server获取数据的SELECT语句中，我将ReorientObject（）添加到子句中，如下所示。然后我的形状就好了。

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

d3.js无法正确呈现geojson数据

1 个答案: