I am trying to render a d3 map inside of a React component but the result is a tiny representation of the map. When I try this code outside of React, it works well.

I am using a class-based component. Any help will be greatly appreciated

Here is the code:

componentDidMount() {
    

    var height = 800,
      width = 800,
      projection = d3.geoMercator(), 
      nyc = void 0,
      map;

    var path = d3.geoPath().projection(projection);

    var svg = d3
      .select(this.myRef.current)
      .append("svg")
      .attr("id", "MapSVG_")
      .attr("width", width)
      .attr("height", height)
      .style("position", "relative")
      .style("opacity", "0.8")
      .style("overflow", "visible");

    const districts = feature(boroughsData, boroughsData.objects.districts);


    projection.scale(1).translate([0, 0]);
    const b = path.bounds(districts);
    const s =
      0.85 /
      Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
    const t = [
      (width - s * (b[1][0]   b[0][0])) / 2,
      (height - s * (b[1][1]   b[0][1])) / 2
    ];
    projection.scale(s).translate(t);
    map = svg
      .append("g")
      .attr("class", "boundary")
      .attr("x", 300);
      
    nyc = map.selectAll("path").data(districts.features);
    nyc
      .enter()
      .append("path")
      .attr("d", path)
      .attr("class", "nycDistrict")
      .style("stroke", "rgb(226, 252, 255)")
      .style("cursor", "pointer")
      .attr("stroke-width", 0.7)
      .attr("fill", "#2D4859");
    nyc.attr("fill", "#eee");
    nyc.exit().remove();
    
}

The tiny dot is the map, and it should be of the same size as its container.

CodePudding user response：

A simple

   .fitSize([width, height], geoData)

Under d3.geoMercator() fixed everything