react d3 网格化中国地图 使用csv中某一年的数据

csv: https://github.com/120821/react_learn_for_d3_svg_path_20230912/blob/main/src/china_population.csv

把CSV中某一年的数据展示为网格化地图：（地图和网格的比例还没有调整好）：

import React, { useEffect, useRef } from "react";
import * as d3 from "d3";
import chinaData from "./china.json";
import chinaPopulationData from "./china_population.csv";
const GridMap = () => {
const svgRef = useRef(null);
useEffect(() => {
const svg = d3.select(svgRef.current);
// 定义地理投影
const projection = d3.geoMercator()
.scale(800)
.fitSize([300, 300], chinaData);
//.fitSize([100, 100], chinaData);
const path = d3.geoPath().projection(projection);
// 绘制地图路径
svg.selectAll("path")
.data(chinaData.features)
.enter()
.append("path")
.attr("d", path)
// 地图的border
.attr("stroke", "blue")
//  背景色: 整个地图
.attr("fill", "none");
// 创建网格
const grid = d3.geoGraticule();
// 绘制网格路径
svg.append("path")
.datum(grid())
.attr("d", path)
.attr("stroke", "#ddd")
.attr("fill", "none");
// 这里添加之前转换的 JSX 代码
d3.csv(chinaPopulationData).then((csv_data) => {
let areas = [];
let population = [];
// setup population
csv_data.forEach((line, index) => {
population.push(parseFloat(line['result_1990'])); // 修改这里，指定特定年份的数据
});
// 设置方块的颜色
let linear = d3.scaleLinear().domain(d3.extent(population)).range(['white', 'red']); // 修改这里，指定颜色范围
let tag_g = svg.append('g').attr('id', 'result_1990'); // 修改这里，指定特定年份的ID
// 开始画每个小方块。每一度一个小块
csv_data.forEach((line, index) => {
// 平时都是false, 仅仅在出问题的时候，使用后面的 index >=3
let is_debug = false; //index >= 3
if (is_debug) {
return;
}
let init_x = parseFloat(line.longitude);
let init_y = parseFloat(line.latitude);
let one_area = {
type: "Polygon",
coordinates: [
[
[init_x, init_y], [init_x, (init_y + 1)], [(init_x + 1), init_y + 1], [init_x + 1, init_y], [init_x, init_y]
]
]
};
//d3.select('#result_1990') // 修改这里，指定特定年份的ID
let column_name = "result_1990"; // 修改这里，指定特定年份的列名
let emission = line[column_name];
tag_g.append("path")
.attr("d", path(one_area))
.attr('fill', linear(parseFloat(line[column_name])))
.attr('opacity', 0.6);
});
});
}, []);
return (
<svg ref={svgRef} width={500} height={500}></svg>
);
};
export default GridMap;

但是把浏览器放大后，可以看到网格数据是正常的