我正在嘗試在 React 組件內渲染 d3 地圖，但結果是地圖的微小表示。當我在 React 之外嘗試這段代碼時，它運行良好。
我正在使用基于類的組件。任何幫助將不勝感激
這是代碼：
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();
}
小點就是地圖，它應該和它的容器大小一樣。
uj5u.com熱心網友回復：
一個簡單的
.fitSize([width, height], geoData)
在 d3.geoMercator() 下修復了一切
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/485302.html
標籤：javascript 反应 d3.js