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

沃梦达教程前端问题

2022-01-01

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

加载