使用d3.json请求数据时links返回undefined，求解决方案

问题原因 #

1. 回调与async/await混用失效：当给d3.json传入回调函数时，它不会返回Promise对象，await无法等待异步请求完成，等于没起到作用。
2. 变量作用域隔离：回调函数里的links是局部变量，和你外部执行console.log(links)的变量不是同一个，就算在回调里赋值也传不到外部。
3. 函数未返回数据：readData函数没有返回读取到的结果，就算请求完成，也没法从函数外部拿到数据。

修正方案 #

方案1：async/await正确写法（推荐）

去掉回调函数，d3.json不传回调时会返回Promise，此时await能正常等待请求完成，同时让函数返回数据：

async function readData() {
    // 不传回调，d3.json返回Promise，await等待请求完成并获取数据
    const links = await d3.json("edge_index.txt");
    return links;
}

// 调用函数并处理数据（需在async函数内使用await）
async function init() {
    const links = await readData();
    console.log(links); // 这里能正确输出数据
}

init();

方案2：纯回调写法

如果习惯用回调，就把数据处理逻辑放在回调内部，不要在外部访问局部变量：

function readData() {
    d3.json("edge_index.txt", function(error, links) {
        if (error) throw error;
        console.log(links); // 直接在回调里处理数据
        // 后续绘图等逻辑也放在此处
    });
}

readData();

内容的提问来源于stack exchange，提问作者Studet