'geo.json d3 projection no valid path is generated

i have a problem with the geo.json from source. In the Github preview it looks fine, but not in my app. One of the other geo files from there is working fine on my app. (laender_999_geo.json)

Usually im am using projection.fitSize for country specific data geo files, but here the path is totaly wrong. On codepen you can see the behavior. (maybe you have to disable cors) It displays with geoMercator() a rectangle with a very small undefiend path result, on zooming zoom in this could be a few right paths, but the most others are missing. I tried different projections and scales, but i dont get the right result.

So what can i do to generate the right view of the districts and villages?

To preserve the code:

const render = (village) => {
  const geoMap = d3.select("#geo-map").append("g").attr("id", "village");

  const projection = d3.geoMercator();

  projection.fitSize([500, 500], village);
  geoMap
    .selectAll("path")
    .data(village.features)
    .join("path")
    .attr("d", d3.geoPath().projection(projection))
    .attr("stroke", "black")
    .attr("fill", (d) => "blue")
    .attr("id", (d) => {
      return d.properties.name;
    });
};

/*
works:
d3.json('https://raw.githubusercontent.com/ginseng666/GeoJSON-TopoJSON- 
Austria/master/2021/simplified-99.9/laender_999_geo.json')*/

d3.json("https://raw.githubusercontent.com/ginseng666/GeoJSON-TopoJSON-Austria/master/2021/simplified-99.9/bezirke_999_geo.json"
).then(function (json) {
  render(json);
});


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source