尝试使用queue.js将简单的CSV文件加载到D3中 [英] Trying to load simple CSV file into D3 with queue.js

问题描述

我是Web开发人员的新手，并且正在尝试找出如何将CSV数据加载到D3.js中的方法，并使用queue.js来确保在执行代码的下一步之前该数据已完全加载(将绘制带有数据的图表.

I'm a newbie to web dev, and am trying to figure out how to load CSV data into D3.js, using queue.js to ensure that data is fully loaded before I execute the next step of the code (which will be drawing a chart with the data).

我已经无休止地在Google上进行搜索，但是似乎无法将我的头围在queue.js的工作方式上.

I have googled this endlessly, but can't seem to wrap my head around how queue.js works.

我有以下代码，无法理解为什么它不起作用.

I have the following code, and can't understand why it isn't working.

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

我在控制台中收到以下错误: 未捕获的TypeError:无法读取未定义的属性'apply'".

I get the following error in the console: "Uncaught TypeError: Cannot read property 'apply' of undefined".

我知道函数"makeChart"正在运行，因为我得到了一切已运行"作为输出.但是由于某种原因，它没有传递我的"mydata"变量.

I know that the function 'makeChart' is running because I get 'everything ran' as an output. But for some reason, it doesn't pass my 'mydata' variable in.

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

The console.log within the d3.csv function does work correctly and outputs the correct values. But console.log(data) in the makeChart function is showing up as 'undefined' in the console.

为这个简单的问题表示歉意，但是我对此并不陌生，从谷歌搜索中找到的示例并没有使我能够解决这个问题.

Apologies for the simplistic question, but I'm super new to this and the examples I've found from googling haven't enabled me to solve this problem.

谢谢

J

推荐答案

您是这样做的:

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

制作图表"功能应如下所示:

And Make chart function should be like this:

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

编辑

如果您有多个网址，它将像这样:

If you have multiple urls it will be like this:

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中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！