Javascript d3 从 csv 读取

Yoe*_*ril 5 javascript csv d3.js

好的,所以我对 javascript 有点菜鸟,我需要从 csv 读取数据以使用 d3 制作条形图。条形图对我来说没问题,从 csv 文件中读取的是。这是我的代码:

var dataset;
    d3.csv("gender_ratio.csv", function(data) {
    dataset = data;
    return dataset;
});

var add = function(year, total, males, females){
    var year = {
        year: year,
        total: total,
        males: males,
        females: females
    };
    newdata.push(year);
    return newdata;
};

for (var i = 0; i < dataset.length; i += 4){
    add(dataset[i], dataset[i+1], dataset[i+2], dataset[i+3]);
    return newdata;
};
Run Code Online (Sandbox Code Playgroud)

有人可以告诉我我在这里出了什么问题吗?我正在使用 modzilla firefox 运行它,因此浏览器安全性不是这里的问题。

kno*_*ary 4

加载 csv 数据的调用异步完成。这意味着您的for循环在数据加载之前运行。

如果将 for 循环移至调用的回调函数中,则d3.csv数据将可用。

您还应该检查返回的数据是什么样的d3.csv。您的代码假设它返回一个平面数组,而它实际上返回一个对象数组,其中每个元素代表一行。如果您console.log在函数的回调中添加 a ,您将更好地了解数据的样子。

for 循环中还有一个return语句,这意味着它只会在退出循环之前处理数据的第一个元素。

d3.csv("gender_ratio.csv", function(data) {
    dataset = data;
    // process data here
    console.log(data);
});
Run Code Online (Sandbox Code Playgroud)