I am attempting to use the geojson features of d3 with a file I created in ArcGIS. The file is a contour map of some global data. But for some reason every time I generate the SVG additional geometry is generated for each multipolygon (contour layer) that covers the entire map. It does not appear to be an issue with inverted geometry as the intended polygons are filled correctly, but the additonal square is just rendered alongside. I've opened the file in inkscape to confirm this. I have checked the data in geojson.io and geojsonlint and both show it being fine. I have also manually looked through the geojson for the vertices that are added to the svg and confirmed they are not present. I have also tried reversing the vertex order.
The below code snippet should show two small filled areas (the top layer of the contour map) on a white background. These are displayed. But the entire map is also covered in a filled rectangle.
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>Any suggestions as to what could be causing this would be greatly appreciated.