¿Por qué d3.js sólo funciona con GeoJSON formateado a la izquierda?
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
[0, 0], [10, 0], [0, 10], [0, 0]
]
]
}
}
]
};
está supuestamente bien formado y no roto - https://geojsonlint.com/ lo muestra de la siguiente manera
mientras que d3.js lo muestra como un agujero en el mundo (área rellena en todo el mundo excepto esa área)
Mi, probablemente chapucero, código de intento de d3 está alojado en https://matkoniecz.github.io/wat/valid.html (con GeoJSON correcto). Versión con puntos en orden inverso, levantando advertencias en otros lugares funciona: https://matkoniecz.github.io/wat/map.html
¿Qué está pasando aquí? Es probable que me esté perdiendo algo, pero se me acaban las ideas. ¿Quizás d3 simplemente no soporta GeoJSON? ¿Y todos los ejemplos que he encontrado están rotos/confusos porque la gente que los hizo no sabía que GeoJSON no está soportado?
El código también se publica a continuación:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div id="content">
<svg width="800px" height="600px">
<g class="generated_map" id="generated_map"></g>
</svg>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.6.2/d3.min.js"></script>
<script>
const width = 800;
const height = 600;
var geojson = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {},
"geometry": {
"type": "Polygon",
"coordinates": [
[
//[-179, 80], [179, 0], [179, 80], [-179, 80] // works? why?
//[0, 0], [10, 0], [0, 10], [0, 0] // hole in the world
[0, 0], [0, 10], [10, 0], [0, 0]
]
]
}
}
]
};
var projection = d3.geoMercator().fitSize([width, height], geojson)
var geoGenerator = d3.geoPath()
.projection(projection);
function update(geojson) {
var u = d3.select('#content g.generated_map')
.selectAll('path')
.data(geojson.features);
u.enter()
.append('path')
.attr('d', geoGenerator)
.attr("stroke", 'black')
.attr("stroke-width", "1")
.attr("fill", "blue")
}
update(geojson);
</script>
</body>
</html>