Estoy tratando de representar un mapa d3 dentro de un componente React pero el resultado es una pequeña representación del mapa. Cuando pruebo este código fuera de React, funciona bien.

Estoy usando un componente basado en clases. cualquier ayuda será apreciada

Aquí está el código:

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

El punto diminuto es el mapa y debe tener el mismo tamaño que su contenedor.