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

Question

要在 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 中都尝试过，并收到通知说 promise 或 queue 不是函数。所以我解释说在版本 7 中还有另一种加载两个外部文件的方法。

感谢您提供的任何帮助，尽管我在整个 Internet 上都进行了搜索，但直到现在我仍找不到任何帮助。关于第 3 版到第 6 版有很多 material，但关于第 7 版的要少得多。

Answer 1

d3.json in d3 v7 returns a promise, so what you wrote is almost correct. Just that the second argument isn't for manipulating data (it's for passing additional options to the fetch call: see 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 中加载两个外部文件？

How to load two external files in D3?

javascript

d3.js

geojson

topojson