使用Vega调试时查看CSV数据返回null求助（JSON数据正常）

问题原因 #

CSV数据是通过网络异步加载的，你当前代码中调用view.data("data")时，CSV文件的加载和解析流程还没完成，因此返回null。而JSON数据如果是本地嵌入或加载速度足够快，会在调用时刚好完成加载，所以能正常获取数据。

解决方案 #

方案1：用runAsync()等待加载完成

通过view.runAsync()的Promise回调，确保在视图初始化、数据加载解析完成后再获取数据：

let spec = {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "data": [
        {
            "name": "data",
            "url": "link.csv",
            "format": {"type": "csv", "parse": "auto"}
        }
    ]
};

let runtime = vega.parse(spec);
let view = new vega.View(runtime)
    .logLevel(vega.Error)
    .renderer("svg")
    .initialize("#view")
    .hover();

// 等待所有异步操作完成后获取数据
view.runAsync().then(() => {
    let dd = view.data("data");
    console.log(dd);
});

方案2：监听数据变化事件

通过添加信号监听器，在数据加载完成时自动触发获取逻辑：

let spec = {
    "$schema": "https://vega.github.io/schema/vega/v5.json",
    "data": [
        {
            "name": "data",
            "url": "link.csv",
            "format": {"type": "csv", "parse": "auto"}
        }
    ]
};

let runtime = vega.parse(spec);
let view = new vega.View(runtime)
    .logLevel(vega.Error)
    .renderer("svg")
    .initialize("#view")
    .hover();

// 监听数据加载完成事件
view.addSignalListener("data", () => {
    let dd = view.data("data");
    if (dd) console.log(dd);
});

// 启动视图
view.runAsync();

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