本文介绍了如何在D3中加载两个外部文件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
要在D3中加载一个TopOJson文件(我使用的是版本7),操作非常简单:
d3.json("file01.json").then(function(topology) {
要加载以前版本中可以使用的两个文件,例如在版本6中:
Promise.all([
d3.json("file01.json"),
d3.json("file02.json", function(d) {
data.set(d.code, +d.pop)
})
]).then(function(loadData){
和版本4,例如:
d3.queue()
.defer(d3.json, "file01.json")
.defer(d3.json, "file02.json", function(d) { data.set(d.code, +d.pop); })
.await(ready);
我在版本7中尝试了这两种方法,收到的通知是承诺或队列不是一个函数。所以我解释说,在版本7中,还有另一种加载两个外部文件的方法。
感谢你的帮助,尽管我在互联网上到处寻找,但直到现在我都找不到。有很多关于版本3到版本6的材料,但到版本7的材料要少得多。
推荐答案
d3.json
在d3 v7中返回承诺,因此您写的内容几乎是正确的。只是第二个参数不是用来操作数据的(它是用来将其他选项传递给FETCH调用的:请参阅fetch() API)。D3.json使用浏览器内置的Fetch()API。
若要操作数据,您必须在THEN回调函数中操作。
Promise.all([
d3.json('file01.json'),
d3.json('file02.json')
]).then(function([data01, data02]){
// manipulate data here
// data01
// data02
})
有关获取后记录的数据,请参阅此codepen检查控制台中的工作示例。
这篇关于如何在D3中加载两个外部文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!