如何使用d3js v5将CSV文件读入阵列
我正在创建一个数据仪表板，它应该允许用户指向其文件系统上的CSV文件，然后将其上传到仪表板中，以便在其上执行各种可视化操作。
我使用了一个很好的d3js示例进行可视化，但我发现没有一个示例包括读取CSV文件，并且我无法使其工作。我可以读取CSV文件并将内容记录到控制台，但无论我如何将数据传递到数组中(我随后可以将其用作可视化的基本数据)，我的数组根本无法作为JS甚至d3js变量使用。
这是我正在使用的文件的一部分-给出了在不同的欧盟国家使用的汽车数量。
Country;Car;Van;Truck;Total
Austria;4748048;375163;78539;5201750
Belgium;5587415;678801;159623;6425839
Croatia;1489338;127395;45757;1662490function getCSVdata( ) {
var myData = [];
d3.dsv(";","EU-cars.csv", function(d) {
return {
State : d.Country,
freq: {
low : d.Car,
med : d.Van,
high : d.Truck
}
};
}).then( function(d) {
myData.push( d );
console.log( d );
});
return myData;
}返回值被赋值给一个名为'freqData‘的变量(只是使用这里的现有示例代码来尝试并本地化问题-如果我在JS中声明对象，而不是从CSV文件中读取对象，则使用的代码工作文件)。
将'freqData‘对象写入我的控制台，可以看到它是一个包含1个元素的数组。向控制台写入'freqData‘将显示一个包含所有预期26条记录的数组。但是尝试编写'freqData.length‘会给出一个错误，因为它是未定义的。尝试使用警报会导致错误。
对于那些拥有大量d3js和其他JS经验的人来说，这可能是件简单的事情，但事实证明，对于新手来说，它太复杂了。
我需要使用d3js的最新版本(v5)，它使用的Promise对象对我来说是全新的。我不能通过阅读大量关于各种所谓已知方法的部分信息来解决这个问题。如果有人能发布一个读取CSV并将数据传递给JS对象的完整工作示例，那就太好了。我快没力气和时间了。
谢谢
4everJang
回答 1
Stack Overflow用户
发布于 2018-05-29 06:22:40
当你运行你的代码时，你应该看到你确实在加载数据。当我在dsv/csv文件中使用您的示例数据并运行您的函数时，会将以下内容记录到控制台：
因此，根据then方法中的控制台日志，看起来既可以成功加载dsv文件，也可以执行row函数。
让我们仔细看看.then方法，它在文件加载并应用row函数之后运行-或者，一旦承诺实现。所以这里的关键部分是then方法直到实现了承诺之后才执行所提供的函数。在我们等待承诺实现的同时，代码会继续执行，在你的例子中，返回语句会在数据完全加载之前执行，因此在then方法执行之前。这意味着您没有返回任何数据，这就是您的问题所在。
使用row函数获取数据的最简单也可能是最常见的d3模式是将需要加载数据的代码放入.then方法的实现函数中：
function getCSVdata( ) {
d3.dsv(";","https://raw.githubusercontent.com/Andrew-Reid/SO/master/dsv.csv", function(d) {
return {
State : d.Country,
freq: {
low : d.Car,
med : d.Van,
high : d.Truck
}
};
}).then(function(data) {
console.log("file has " + data.length + " rows");
logger(data);
});
}
getCSVdata();
function logger(data) {
console.log(data);
}.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://d3js.org/d3.v5.min.js"></script>
或者，您可以采用稍微不同的形式：
function getCSVdata( ) {
d3.dsv(";","https://raw.githubusercontent.com/Andrew-Reid/SO/master/dsv.csv", function(d) {
return {
State : d.Country,
freq: {
low : d.Car,
med : d.Van,
high : d.Truck
}
};
}).then(fulfilled);
}
getCSVdata();
function fulfilled(data) {
// do stuff here:
console.log(data);
}.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://d3js.org/d3.v5.min.js"></script>
https://stackoverflow.com/questions/50572762
复制相似问题