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

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 TypeError: Cannot read property 'apply' of undefined".

我知道函数 'makeChart' 是运行因为我得到 'everything ran' 作为输出。但出于某种原因，它没有将我的 'mydata' 变量传递给

d3.csv 函数中的 console.log 确实可以正常工作并输出正确的值。但是 makeChart 函数中的 console.log(data) 在控制台中显示为 'undefined'。

对于这个简单的问题，我深表歉意，但我对此非常陌生，我从谷歌搜索中找到的例子并没有让我解决这个问题。

谢谢，

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

编辑

如果您有多个网址，它将是这样的：

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

希望对您有所帮助！

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

Trying to load simple CSV file into D3 with queue.js

javascript

csv

d3.js

queue.js