Estoy tratando de trazar el mapa de Italia con todas las fronteras de las regiones dentro. Tengo algunos problemas porque tengo un archivo .json con todas las coordenadas de las líneas (estoy seguro de que es correcto porque tracé en https://geojson.io/ y se muestra perfectamente), sin embargo, en mi código solo se traza la última región de mi colección, mientras que la otra parece ignorarse.
Básicamente es un código de copiar y pegar porque no sé bien cómo funciona d3.js, así que seguramente estoy haciendo algo mal.
aquí está el código
<!DOCTYPE html> <html> <head> <title>World Map</title> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://d3js.org/topojson.v2.min.js"></script> <style> path { fill: lightgray; stroke: #000; } .graticule { fill: none; stroke: #ccc; stroke-width: .5px; } .foreground { fill: none; stroke: #333; stroke-width: 1.5px; } </style> </head> <body> <svg width="1300" height="800"></svg> <script> const svg = d3.select("svg") const myProjection = d3.geoNaturalEarth1() const path = d3.geoPath().projection(myProjection) const graticule = d3.geoGraticule() function drawMap(err, world) { if (err) throw err // other plots // svg.append("path") // .datum(graticule) // .attr("class", "graticule") // .attr("d", path); // // svg.append("path") // .datum(graticule.outline) // .attr("class", "foreground") // .attr("d", path); // log all the regions info->all correct console.log(world); // plot all the lines svg.append("g") .selectAll("path") .data(world.features) .enter().append("path") .attr("d", path); } //local json file d3.json("gadm40_ITA_shp/gadm40_ITA_1.json", drawMap) </script> </body> </html>