如何在D3中加载两个外部文件?

How to load two external files in D3?(如何在D3中加载两个外部文件?)

本文介绍了如何在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中加载两个外部文件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本文标题为:如何在D3中加载两个外部文件?

基础教程推荐