從csv讀取的Javascript d3

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;
};

誰能告訴我這里出了什么問題？ 我用modzilla firefox運行它，所以瀏覽器安全性不是問題。

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);
});

Answer 2

首先，d3的.csv函數異步工作，因此您需要在.csv函數中調用te實際條形圖繪制函數。 如果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. */
});