从D3中的多个csv文件导入数据

I am brand new to D3 and just started working on an a project. My question is this. I want to import data from 2 csv files in D3 to use them for graph comparisons. The problems I am facing are:

我是D3的新手，刚刚开始研究一个项目。我的问题是这个。我想从D3中的2个csv文件导入数据，以便将它们用于图形比较。我面临的问题是：

1.How do I import data from multiple csv files.
2.Can I use one array for each csv or does D3 use only one global data array?
3.Is there a way to choose a certain column from the csv files to import?

Here is an example, I want to import the "oldVer" from each of the files in separate arrays and then use the 2 arrays to work with. Is that posible in D3 and how?

1.如何从多个csv文件导入数据。 2.我可以为每个csv使用一个数组，或者D3只使用一个全局数据数组吗？ 3.有没有办法从csv文件中选择某个列来导入？这是一个例子，我想从单独数组中的每个文件导入“oldVer”，然后使用2个数组来处理。这在D3中是可行的吗？

csv 1
time,oldVer,newVer,oldT,newT
1,180930,190394,24,59
2,198039,159094,26,45
3,152581,194032,22,61

csv 1次，oldVer，newVer，oldT，newT 1,180930,190394,24,59 2,198039,159094,26,45 3,152581,194032,22,61

csv 2
time,oldVer,newVer,oldT,newT
1,184950,180435,27,26
2,120590,129409,13,13
3,165222,182133,60,54

csv 2次，oldVer，newVer，oldT，newT 1,184950,180435,27,26 2,120590,129409,13,13 3,165222,182133,60,54

Again sorry for the dumb question but I have found little feedback on this matter. Any help will be appreciated.

再次对这个愚蠢的问题感到抱歉，但我发现这个问题的反馈很少。任何帮助将不胜感激。

5 个解决方案

#1

You simply call d3.csv several times:

你只需要多次调用d3.csv：

d3.csv("csv1.csv", function(error1, data1) {
  d3.csv("csv2.csv", function(error2, data2) {
    // do something with the data
  });
});

As for your third question, no, D3 will parse everything. There's nothing forcing you to use all the data though, so if you're interested in only one column, just use the data from that.

至于你的第三个问题，不，D3会解析一切。没有什么可以强迫你使用所有数据，所以如果你只对一列感兴趣，只需使用那里的数据。

#2

You could use a d3 queue to load the files simultaneously. An example;

您可以使用d3队列同时加载文件。一个例子;

d3.queue()
.defer(d3.csv, "file1.csv")
.defer(d3.csv, "file2.csv")
.await(function(error, file1, file2) {
    if (error) {
        console.error('Oh dear, something went wrong: ' + error);
    }
    else {
        doStuff(file1, file2);
    }
});

#3

In d3 version 5, you can use Promise.all to load multiple csv files. Example:

在d3版本5中，您可以使用Promise.all加载多个csv文件。例：

Promise.all([
    d3.csv("file1.csv"),
    d3.csv("file2.csv"),
]).then(function(files) {
    // files[0] will contain file1.csv
    // files[1] will contain file2.csv
}).catch(function(err) {
    // handle error here
})

More info about loading csv in d3 v5

有关在d3 v5中加载csv的更多信息

More info about Promise.all()

有关更多信息Promise.all（）

#4

Stuart Hallows' answer is correct- d3.queue is used in d3 to load multiple files. I don't recommend nesting the loading of multiple files as in Lars Kotthoff's response- this is not best practice.

Stuart Hallows的回答是正确的 - 在d3中使用d3.queue来加载多个文件。我不建议在Lars Kotthoff的响应中嵌套多个文件的加载 - 这不是最佳实践。

EDIT: I want to clarify the reason that nesting is not best practice. It reduces the readability/understanding ability of your code, and there are also better, more semantic ways to handle multiple asynchronous blocks of code (that is, callbacks and promises).

编辑：我想澄清嵌套不是最佳实践的原因。它降低了代码的可读性/理解能力，并且还有更好，更语义的方法来处理多个异步代码块（即回调和承诺）。

Better to use a callback and pass results to it after all file loading tasks are complete. Callbacks eliminate the need for nesting multiple resource requests inside each other in a pyramid of nesting.

所有文件加载任务完成后，最好使用回调并将结果传递给它。回调消除了在嵌套金字塔中将多个资源请求嵌套在彼此内部的需要。

Not a dumb question, by the way!

顺便说一下，这不是一个愚蠢的问题！

#5

To answer your part 3,

回答你的第3部分，

Is there a way to choose a certain column from the csv files to import?

有没有办法从csv文件中选择要导入的某个列？

No, you cannot load in part of a CSV. You can, however, load in the entire CSV file and selectively use one column from it. You can refer to data.newVer to utilize the newVer column data.

不，您无法加载部分CSV。但是，您可以加载整个CSV文件并有选择地使用其中的一列。您可以参考data.newVer来使用newVer列数据。

#1