JavaScript d3 从 CSV 文件读取

Question

好的，我在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;
};

有人能告诉我这里出了什么问题吗？我正在使用Mozilla Firefox运行它，所以浏览器安全不是问题。

- Yoeril

Answer 1

调用加载csv数据的过程是异步完成的。这意味着在数据被加载之前，您的for循环已经运行了。

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

您还应该检查d3.csv返回的数据格式。您的代码假设它返回一个平坦的数组，但实际上它返回一个对象数组，其中每个元素表示一行。如果在回调函数中添加console.log，则可以更好地了解数据的样子。

您在那个for循环中还有一个 return 语句，这意味着它只会处理第一个数据元素，然后退出循环。

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

- knolleary

Answer 2

首先，d3的.csv函数是异步的，因此您需要在.csv函数内调用实际的条形图绘制函数。如果CSV文件有一个包含列名的第一行，则可以使用回调函数：

var dataset = [];
d3.csv("gender_ratio.csv", function(d) {
  return {
    year: d.year,
    total: d.total,
    males: d.males,
    females: d.females,
  };
}, function(error, rows) {
  dataset = rows;
  drawBarChart();  /* <<-- This would be the call to the drawing function. */
});

- Paul