D3 v5加载GeoJSON绘制澳大利亚分级统计图显示空白如何解决

问题原因 #

• 核心原因是D3 v5的文件加载API发生了破坏性变更：v5废除了d3.csv、d3.json等方法的回调参数写法，改为基于Promise的调用方式，你原代码里写在回调内的所有数据处理、渲染逻辑根本不会执行，自然无法渲染出地图。
• 次要排查点：可确认本地data目录下的aust.json已经完整下载、路径拼写无误，CSV文件命名和路径也匹配代码配置。

解决方案 #

将原有嵌套回调写法改为D3 v5支持的Promise链式调用即可，修改后的完整可运行代码如下：

const second_width = 900;
const second_height = 750;

const projection = d3.geoMercator().center([132, -28]) // 澳大利亚地理中心近似坐标
                   .translate([second_width/2, second_height/2])
                   .scale(2450);

const second_color = d3.scaleQuantize().range(['#edf8fb','#ccece6','#99d8c9','#66c2a4','#2ca25f','#006d2c']);
    
const path = d3.geoPath().projection(projection);

const second_svg = d3.select("#chart2")
            .append("svg")
            .attr("width", second_width)
            .attr("height", second_height);

// D3 v5 使用Promise链式加载数据
d3.csv("data/Waste_Per_State_Per_Capita(1).csv")
.then(function(data) {
    // 设置颜色比例尺输入域
    second_color.domain([
        d3.min(data, d => +d.Total), 
        d3.max(data, d => +d.Total)
    ]);
    // 加载地理JSON数据
    return d3.json("data/aust.json").then(json => [data, json]);
})
.then(function([data, json]) {
    // 匹配CSV数据和地理数据
    for (let i = 0; i < data.length; i++) {
        const data_state = data[i].States;
        const dataValue = parseFloat(data[i].Total);
        for (let j = 0; j < json.features.length; j++) {
            const json_state = json.features[j].properties.STATE_NAME;
            if (data_state == json_state) {
                json.features[j].properties.value = dataValue;
                break;
            }
        }       
    }

    // 绘制地图路径
    second_svg.selectAll("path")
        .data(json.features)
        .enter()
        .append("path")
        .attr("d", path)
        .style("fill", d => {
            const value = d.properties.value;
            return value ? second_color(value) : "#ccc";
        });

    // 绘制州名标注
    second_svg.selectAll("text")
        .data(json.features)
        .enter()
        .append("text")
        .attr("fill", "darkslategray")
        .attr("transform", d => `translate(${path.centroid(d)})`)
        .attr("text-anchor", "middle")
        .attr("dy", ".35em")
        .text(d => d.properties.STATE_NAME);
})
.catch(function(error) {
    // 捕获加载过程中的错误，方便排查
    console.error("数据加载或渲染失败：", error);
});

改动说明 #

• 移除原d3.csv()、d3.json()的回调参数，改用.then()接收加载完成的返回数据
• 新增.catch()捕获加载、渲染阶段的错误，方便快速定位路径错误、数据格式错误等问题
• 原有投影配置、数据匹配逻辑、渲染逻辑无需改动，仅适配新的加载API即可正常运行。

内容的提问来源于stack exchange，提问作者Hoang Cuong Nguyen