2

我有一个非常标准的代码，它可以读取 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/

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

4

1 回答 1

1

出于某种原因，这些多边形中的点的顺序是相反的——它们应该是顺时针的，但被定义为逆时针，并且 d3 遵循多边形解释的右手规则。

要修复，请在文件或 JS 中反转点：

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

固定小提琴：http: //jsfiddle.net/nrabinowitz/QWZXd/1/

于 2013-08-22T17:25:01.633 回答