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

Question

我尝试从两个不同的来源加载数据.加载数据后我想在一个防暴标记文件中使用它.但我不明白如何加载第二个文件,因为我真的不了解异步调用.

我需要在代码中修改什么才能获取数据？现在,第二个数据对象未定义.这是我的代码:

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
  })
})

Answer 1

在D3取模块利用了的提取API和意志,因此,返回Promise为通过该模块的方便的方法之一发出的每个请求.要一次加载多个文件,您可以使用Promise.all哪个文件将返回一个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()方法调用.此时,您可以访问数据并执行其余代码.