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

Posted 2023-02-22

【中文标题】从 D3 中的多个 csv 文件导入数据

【英文标题】：Importing data from multiple csv files in D3

【发布时间】：2014-03-17 12:49:26

【问题描述】：

我是 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

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

【参考方案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
)

More info about loading csv in d3 v5

More info about Promise.all()

【讨论】：

感谢@Abang F，我见过的最简单最清晰的演示：)

我能以某种方式将它用于动态数量的文件吗？

@blckbird Promise.all(fileList.map(d3.csv)).then(...)

【参考方案2】：

您只需多次拨打d3.csv：

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

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

【讨论】：

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

就在现场，我现在就试试。我之前读过异步调用，但不能说太多，我只需要尝试一下。谢谢你们的快速反应。

如果我在这里，在我引用的链接中，我相信你想要 7.2.2 控制流模式 #2，其中“......我们只想进行一小部分操作，启动它们全部并行，然后在它们全部完成后执行一些操作。”

@FernOfTheAndes 不——这正是嵌套需要处理的。我仅在第一个请求完成时才发送对第二个 CSV 的请求，因此在第二个处理函数中 both 保证可用。

我现在明白了……只有当数据从外部调用返回时，内部调用才会运行。很抱歉造成混乱。

【参考方案3】：

您可以使用 d3 queue 同时加载文件。一个例子；

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 went wrong: ' + error); else //图的东西 );```

这样做的好方法！

【参考方案4】：

回答你的第 3 部分，

有没有办法从csv文件中选择某一列来 进口？

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