Why do GeoJSON features appear like a negative photo of the features themselves?

问题

I have a pretty standard code thats reads a GeoJSON file and renders its features using D3.js. It works fairly well except with this file: https://github.com/regiskuckaertz/d3/blob/master/circonscriptions.json

The file doesn't look weird or anything, in fact you can preview it on GitHub or geojsonlint.com. However, D3 draws paths that look like the features were used as a clipping mask, i.e. all the shapes are negatives of the features themselves. The code is pretty standard though:

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)); })
}

You can have a look here: http://jsfiddle.net/QWZXd/

The same code works with another file, which comes from the same source.

回答1:

For some reason, the points in these polygons are in reverse order - they ought to be clockwise, but are defined as counterclockwise, and d3 follows the right-hand rule for polygon interpretation.

To fix, reverse the points, either in the file or in JS:

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

Fixed fiddle: http://jsfiddle.net/nrabinowitz/QWZXd/1/

来源：https://stackoverflow.com/questions/18380701/why-do-geojson-features-appear-like-a-negative-photo-of-the-features-themselves

标签

d3.js