使用 d3-fetch 模块加载多个文件

【问题标题】：Load multiple files using the d3-fetch module使用 d3-fetch 模块加载多个文件
【发布时间】：2018-08-20 17:22:05
【问题描述】：

我尝试从两个不同的来源加载数据。加载数据后，我想在 riot 标签文件中使用它。但是我不明白如何加载第二个文件，因为我不太了解异步调用。

我必须在我的代码中修改什么来获取数据？现在，第二个数据对象是未定义的。这是我的代码：

import { csv, json } from 'd3-fetch'
csv('/data/stations.csv', function (stations) {
  json('data/svg_data.json', function (svg) {
    return svg
  })
  stations.position_x = +stations.position_x
  stations.position_y = +stations.position_y
  stations.animation_time = +stations.animation_time
  stations.text_x = +stations.text_x
  stations.text_y = +stations.text_y
    return stations
  }).then(function (stations, svg) {
   mount('metro-app', {
     stations: stations,
     svg_data: svg
  })
})

【问题讨论】：

标签： javascript d3.js riot.js

【解决方案1】：

d3-fetch 模块使用Fetch API，因此，对于通过模块的一种便捷方法发出的每个请求，将返回一个Promise。要一次加载多个文件，您可以使用Promise.all，它将返回一个 Promise，一旦提供给调用的所有 Promise 都已解决，该 Promise 就会解决。

import { csv, json } from 'd3-fetch'

Promise.all([
  csv('/data/stations.csv'),
  json('data/svg_data.json')
])
.then(([stations, svg]) =>  {
  // Do your stuff. Content of both files is now available in stations and svg
});

这里提供了d3.csv 和d3.json 来从两个文件中获取内容。一旦两个请求都完成，即两个 Promise 都已解决，每个文件的内容都会提供给单个 Promise 的 .then() 方法调用。此时，您可以访问数据并执行其余代码。

【讨论】：