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

IT技术 javascript arrays csv import d3.js
2021-03-20 09:25:14

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

1.如何从多个csv文件中导入数据。
2.我可以为每个csv使用一个数组还是D3只使用一个全局数据数组?
3.有没有办法从csv文件中选择某一列进行导入?

这是一个示例,我想从单独数组中的每个文件中导入“oldVer”,然后使用 2 个数组进行处理。这在 D3 中可行吗?

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

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

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

4个回答

在 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,我见过的最简单、最清晰的演示:)
2021-04-22 09:25:14
@blckbird Promise.all(fileList.map(d3.csv)).then(...)
2021-05-11 09:25:14
我可以以某种方式使用动态数量的文件吗?
2021-05-18 09:25:14

您只需调用d3.csv几次:

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

至于你的第三个问题,不,D3会解析一切。不过,没有什么会强迫您使用所有数据,因此如果您只对一列感兴趣,只需使用其中的数据即可。

就在现场,我现在就去试试。我以前读过异步调用,但不能说太多,我只需要尝试一下。谢谢你的快速反应家伙。
2021-04-23 09:25:14
@FernOfTheAndes 不——这正是嵌套所要处理的。我仅在第一个请求完成时发送对第二个 CSV 的请求,因此在第二个处理程序函数中,这两个函数保证可用。
2021-04-23 09:25:14
我现在明白了......内部调用只会在数据从外部调用返回时运行。对困惑感到抱歉。
2021-05-04 09:25:14
如果我在这里,在我引用的链接中,我相信您需要 7.2.2 控制流模式 #2,其中“...我们只想进行一小组操作,并行启动它们,然后执行某些操作当它们全部完成时。”
2021-05-05 09:25:14
嗨 Lars,由于目标是比较数据并因此同时可用,因此需要控制这些嵌套异步调用的执行流程,不是吗?如果我们在内部函数内部做一些事情,就不能保证 data1 会准备好。我对吗?我正在读这个它在谈论 node.js 但也许它适用。
2021-05-18 09:25:14

您可以使用 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);
    }
});
这也适用于 json 吗?例如``` d3.queue()/* 加载多个数据集*/ .defer(d3.json, "data1") .defer(d3.json, "data2") .await(function(error, data1, data2) { if (error) { console.log('Something got wrong: ' + error); } else { //图形的东西 } });```
2021-04-29 09:25:14
这样做的好方法!
2021-05-17 09:25:14

回答你的第 3 部分,

  1. 有没有办法从csv文件中选择某一列进行导入?

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