0

I am using d3 to design a bubble map chart. I am struggling to add the graticule behind the map. It is drawing the graticule object but it is empty. Can someone please help me?

On the specific, the code I am using to draw the graticule is the following

// Map and projection
var projection = d3.geoGringortenQuincuncial()
   .center([0,20])                // GPS of location to zoom on
   .scale(150)                       // This is like the zoom
   .translate([ width/2, height/2 ])

      // Create and configure a path generator
  var pathGenerator = d3.geoPath()
    .projection(projection);

  // Create and configure the graticule generator (one line every 20 degrees)
  var graticule = d3.geoGraticule()
  //.step([1, 1]);


  // Graticule lines (behind the land)
  var lines = svgmap.selectAll('path.graticule').data([graticule()]);
      lines.enter().append('path').classed('graticule', true);
      lines.attr('d', pathGenerator);
      lines.exit().remove();
Jumpy
  • 1
  • 1
    If needed I can post the all code – Jumpy May 28 '22 at 20:01
  • Don't break your chain - `lines` is a different selection then `lines.enter().append('path')` - you want to use `.attr("d", pathGenerator)` on the newly appended path: `lines.enter().append("path").classed('graticule',true).attr('d', pathGenerator)` – Andrew Reid May 30 '22 at 22:28
  • Thank you. I did it and it seems to draw the graticule but now everything is black. I put my code in a Github repository --> the code starts from line 42 https://github.com/jumpi00/d3-graticule-map.git – Jumpy Jun 01 '22 at 22:38

0 Answers0