Question

我有一个非常标准的代码，可以读取GeoJSON文件并使用D3.js呈现其功能。它的工作原理相当不错，只有这个文件：https://github.com/regiskuckaertz/d3/blob/master/circonscriptions.json

该文件看起来并不奇怪或任何东西，实际上您可以在GitHub或geojsonlint.com上预览它。然而，D3绘制看起来像特征的路径被用作剪贴蒙版，即所有形状都是特征本身的负片。代码非常标准：

var proj = d3.geo.mercator()
  .scale(25000)
  .center([6.08642578125,49.777716951563754])
  .rotate([-.6, -.2, 0]);

var path = d3.geo.path().projection(proj);

function ready(error, luxembourg) {
  svg
    .selectAll("path")
    .data(luxembourg.features)
    .enter().append("path")
      .attr("d", path)
      .attr("class", function(d) { return quantize(rateById.get(d.properties.name)); })
}

您可以在此处查看：http://jsfiddle.net/QWZXd/

相同的代码适用于来自同一来源的另一个文件。

Answer 1

由于某种原因，这些多边形中的点是相反的顺序 - 它们应该是顺时针方向，但是定义为逆时针方向，而d3遵循右手规则进行多边形解释。

修复，反转文件或JS中的点：

luxembourg.features.forEach(function(feature) {
    feature.geometry.coordinates[0].reverse();
});

修正小提琴：http://jsfiddle.net/nrabinowitz/QWZXd/1/

为什么GeoJSON功能看起来像功能本身的负面照片？

1 个答案: