从csv读取的Javascript d3

时间:2015-06-08 09:39:05

标签: 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;
};

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

2 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:4)

首先,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. */
});