如何在 React 组件中渲染 d3.js 地图？

Question

我正在尝试在 React 组件内渲染 d3 地图，但结果是地图的微小表示。当我在 React 之外尝试这段代码时，它运行良好。

我正在使用基于 class 的组件。任何帮助将不胜感激

代码如下：

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

小圆点就是地图，它应该与其容器的大小相同。

Answer 1

简单

   .fitSize([width, height], geoData)

在 d3.geoMercator() 下修复了所有问题

如何在 React 组件中渲染 d3.js 地图？

How to render a d3.js map inside of a React component?

javascript

d3.js

reactjs