从多个csv文件导入数据到D3

Question

我对D3全新，并且刚开始着手一个项目。我的问题是：
1.如何从多个csv文件中导入数据。
2.我能否为每个csv使用一个数组，还是D3仅使用一个全局数据数组？
3.是否有一种方法可以选择要导入的csv文件中的某一列？

以下是一个示例，我想从每个文件中单独导入"oldVer"并将它们存放在不同的数组中，然后使用这两个数组进行比较。在D3中是否可能实现这一点，如何实现？

csv 1
time,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

再次抱歉问了这个愚蠢的问题，但我在这个问题上找到的反馈很少。感谢任何帮助。

- John M.

Answer 1

在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
})

了解在d3 v5中加载csv的更多信息

了解Promise.all()的更多信息

- Abang F.

---

谢谢@Abang F，这是我见过的最简单和最清晰的演示 :) - Markus

我能否以某种方式使用它来处理动态数量的文件？ - timbmg

使用Promise.all(fileList.map(d3.csv)).then(...)。 - BallpointBen

Answer 2

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

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

至于你的第三个问题，答案是否定的。D3会解析所有数据，但并不强制你使用全部数据，如果你只关心其中一列，可以只使用该列的数据。

- Lars Kotthoff

---

嗨Lars，由于目标是比较数据并同时拥有两者，因此需要控制这些嵌套异步调用的执行流程，对吧？如果我们在内部函数中做一些事情，那么不能保证data1已经准备好了。我是对的吗？我正在阅读这个。它谈论的是node.js，但也许适用。 - FernOfTheAndes

非常准确，我现在会尝试一下。我之前读过关于异步调用的内容，但是不太了解，只能自己试试看。感谢你们的快速回复。 - John M.

如果我没记错的话，在我引用的链接中，我认为你想要的是7.2.2控制流模式#2，其中“...我们只想取一小组操作，将它们全部并行启动，然后在所有操作都完成时执行某些操作。” - FernOfTheAndes

@FernOfTheAndes 不是，这正是嵌套所要处理的。我只有在第一个请求完成后才发送第二个CSV的请求，因此在第二个处理程序函数中，两者都已确保可用。 - Lars Kotthoff

我现在明白了...内部调用只有在外部调用返回数据时才会运行。对于造成的困惑，我很抱歉。 - FernOfTheAndes

Answer 3

您可以使用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);
    }
});

- Stuart Hallows

---

这对 JSON 也适用吗？例如： .defer(d3.json, "data1") .defer(d3.json, "data2") .await(function(error, data1, data2) { if (error) { console.log('出错了：' + error); } else { // 图表相关的操作 } });``` - thesayhey

这是一个很棒的方法！ - user2095363

Answer 4

为了回答您的第三个问题，

3. 是否有一种方法可以选择要导入的csv文件中的某一列？

不，您不能只加载CSV文件的一部分。但是，您可以加载整个CSV文件，并从中选择性地使用一列。您可以参考data.newVer来利用newVer列数据。

- travelsize