This simple geojson rectangle displays correctly with some geojson viewers, I get the rectangle as expected. But when I do this with d3, the rectangle seems to wrap.
var polygonData = {
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [
[
[ -100, -20 ],
[ -100, 20 ],
[ 100, 20 ],
[ 100, -20 ],
[ -100, -20 ]
]
]
},
"properties": {}
};
var width = 1000;
var height = 500;
var projection = d3.geo.equirectangular()
.scale(100)
.translate([width / 2, height / 2])
.rotate([0, 0])
.center([0, 0])
.precision(0);
var path = d3.geo.path()
.projection(projection);
var svg = d3.select("body").append("svg")
.attr({
width: width,
height: height
});
svg.append('path')
.datum(polygonData)
.attr({
d: path,
fill: 'orange',
opacity: 0.5
});
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style>
</style>
</head>
<body>
</body>
Here is what I get with the geojson viewer :
But here is what I get with the d3 code above :
The reverse winding order simply fills the opposite shapes, this does not fix the problem. I suppose this is an anti-myrid problem. One fix is to add some intermediate points to make the path not flow around, but I would need to automate this solution with more complex paths.
, geojson d3 , geojson, ?