I try to enlarge my map with geoProjection or geoMercator. The mapsvg is hidden befind a black block, and my map cannot be seen. My code is as follows:

fetch("./data/chinaMapDataAll.json")
  .then(d1 => d1.json())
  .then(d1 => {
    var mapdata = [];
    var mapsvg = d3.select("#mapsvg")
    var mapwidth = mapsvg.attr("width")
    var mapheight = mapsvg.attr("height")
    for(let i=0;i<=d1.features.length-1;i++){
      mapdata.push(d1.features[i].geometry.coordinates[0][0]);
    }
    console.log(mapdata);
    var mapProjection=d3.geoProjection(function(x,y){
      return [x,y];
    });    
    var mapPath = d3.geoPath(mapProjection);                           
    mapsvg.selectAll("path")
      .data(d1.features)
      .join("path")
      .attr("d", function(d) { return  mapPath(d) })      
      .attr("fill",function(d,i) { return scacolor[i]; })