I'm trying to plot italy map with all regions borders inside. I'm having some problems because I've a .json file with all the lines coordinates (I'm sure that's correct because i've plotted on https://geojson.io/ and it shows perfectly), however on my code only the last region of my collection is plotted, while the other seems to be ignored.
It's basically a copy and paste code because I don't know well how d3.js works so I'm surely doing something wrong.
Here's the code
<!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>