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();