0

I am trying to make some features from a .geojson file render using D3 and D3geo and i am following this https://www.d3indepth.com/geographic/ as a guide. I don't really know what i am doing since i am not good at programing. It shows no errors on devtool console and when i inspect it in chrome it shows that the paths are created but the are not showing.

here is my code, the js part:

var width = Math.max(
  document.documentElement.clientWidth,
  window.innerWidth || 0
);
var height = Math.max(
  document.documentElement.clientHeight,
  window.innerHeight || 0
);

d3.json("2022.json").then(function (data) {
  let geojson = data;
  console.log(data);

  let projection = d3
    .geoMercator()
    //.scale(1000)
    //.center([20, 40])
    //.translate([456, 250]);

  projection.fitExtent([width, height], data);

  let geoGenerator = d3.geoPath().projection(projection);

  function update(geojson) {
  let u = d3
    .select("#content")
    .data(geojson.features)
    .enter()
    u.append('path')
    .join("path")
    .attr("d", geoGenerator);
  }

  update(geojson);

});

enter image description here

Kris Biturku
  • 1
  • It could just be that you might not be applying fill colour to the path. – Shreshth Jul 06 '22 at 09:43
  • 1
    Since your path has NaN values, it is not getting created correctly..Why are you appending path and then using join. Enter data and join directly-- d3 .select("#content") .data(geojson.features).join("path").attr("d", geoGenerator); You can read how join works on data here: https://observablehq.com/@d3/selection-join – B Kalra Jul 06 '22 at 09:48
  • Can you share the geojson, or at least a portion of it? NaN svg path data values suggest an issue with your projection or your geographic coordinates. Also, as part of the projection parameters, if you log width and height do you see values you expect? – Andrew Reid Jul 07 '22 at 19:39

0 Answers0