d3 json resulting in empty svg tag

I am trying to plot data from a geojson file inside an svg using d3. But I am getting a blank image. Developer tools shows that the geojson file was loaded but the svg element is empty

var svg = d3.select("#mainSvg");
        var projection = d3.geoMercator();
        var path = d3.geoPath().projection(projection);
        d3.json("static/geojson/roads.geojson").then(function(geojson) {
            svg.selectAll("path")
               .data(geojson.features)
               .enter()
               .append("path")
               .attr("d", path)
               .style("fill", "steelblue");
            }).catch(err => {
                console.error(err)
            });