尝试用D3将简单CSV文件加载到queue.js中

Question

我是web的新手，我正试图弄清楚如何将CSV数据加载到D3.js中，使用queue.js确保在执行代码的下一个步骤(它将用数据绘制图表)之前数据被完全加载。

我一直在谷歌上搜索，但似乎无法理解queue.js是如何工作的。

我有下面的代码，并且无法理解为什么它不能工作。

//Create a queue. First load CSV data, then run a function on the data once fully loaded.
queue()
.defer(d3.csv, "Workbook1.csv")
.await(makeChart(mydata));


//create global variable 'mydata' to store CSV data;

var mydata = [];

//d3 CSV loading function - load data into global variable 'mydata' and convert test scores to numeric format.

d3.csv('Workbook1.csv', function(data) {

    mydata = data;
    mydata.forEach(function(d){ d['Test_Score'] = +d['Test_Score']; });
    console.log(mydata); 

});

//create function that will print my data to the console. Once I figure this out, I'll put in some d3 code to actually make the chart.

function makeChart(data) {
  console.log(data);
  console.log("everything ran");
 };

我在控制台中得到以下错误："Uncaught :无法读取未定义的属性'apply‘“。

我知道函数'makeChart‘正在运行，因为我把’所有东西都运行‘作为输出。但出于某种原因，它并没有传递我的“mydata”变量。

d3.csv函数中的console.log确实正确工作，并输出正确的值。但是，console.log(数据)在makeChart函数中在控制台中显示为“未定义”。

为这个简单的问题道歉，但是我对这个问题非常陌生，我从googling中找到的例子还没有让我解决这个问题。

谢谢,

J

Answer 1

你这样做：

queue()
.defer(d3.csv, "Workbook1.csv")
.await(makeChart(mydata));//here you are calling the function makeChart

应该是这样的：

 queue()
    .defer(d3.csv, "Workbook1.csv") 
    .await(makeChart);//only function name is needed

使图表功能应该是这样的：

function makeChart(error, data) {//first param is error and not data
  console.log(data);
  console.log("everything ran");
 }; 

编辑

如果您有多个urls，则如下所示：

queue()
.defer(d3.csv, "Workbook1.csv")
.defer(d3.csv, "Workbook2.csv")
.await(makeChart);//here you are calling the function makeChart

   function makeChart(error, data1, data2) {//first param is error and not data
      console.log(data1);//workbook1
      console.log(data2);//workbook2
      console.log("everything ran");
     }; 

希望这能有所帮助！