Estoy intentando usar las funciones geojson de d3 con un archivo que creé en ArcGIS. El archivo es un mapa de contorno de algunos datos globales. Pero por alguna razón, cada vez que genero el SVG, se genera geometría adicional para cada multipolígono (capa de contorno) que cubre todo el mapa. No parece ser un problema con la geometría invertida ya que los polígonos previstos se rellenan correctamente, pero el cuadrado adicional simplemente se representa al lado. He abierto el archivo en Inkscape para confirmar esto. Revisé los datos en geojson.io y geojsonlint y ambos muestran que están bien. También busqué manualmente a través del geojson los vértices que se agregan al svg y confirmé que no están presentes. También he intentado invertir el orden de los vértices.
El siguiente fragmento de código debe mostrar dos pequeñas áreas rellenas (la capa superior del mapa de contorno) sobre un fondo blanco. Estos se muestran. Pero todo el mapa también está cubierto por un rectángulo relleno.
d3.json("https://api.npoint.io/028d15b5e75beac68e1f").then(function(data) { var svg = d3.select("body") .append("svg") .attr("width", 1000) .attr("height", 1000) .append("g"); //just look at top layer for simplicity data.features = [data.features[6]]; var projection = d3.geoMercator() .fitExtent([ [0, 0], [1000, 1000] ], data); console.log(data); // Draw the map svg.append("g") .selectAll("path") .data(data.features) .enter().append("path") .attr("d", d3.geoPath() .projection(projection) ) .style("fill", 'red') .style("stroke", "black"); }) <!DOCTYPE html> <html lang="en"> <script src="https://d3js.org/d3.v7.min.js"></script> <body> </body> </html>Cualquier sugerencia sobre lo que podría estar causando esto sería muy apreciada.