使用 d3-fetch 模块加载多个文件
Load multiple files using the d3-fetch module
我尝试从两个不同的来源加载数据。加载数据后,我想在防暴标签文件中使用它。但是我不明白怎么加载第二个文件,因为我不太懂异步调用。
我必须在代码中修改什么才能获取数据?现在,第二个数据对象是未定义的。这是我的代码:
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
})
})
d3-fetch module makes use of the Fetch API and will, therefore, return a Promise
for each request issued via one of the module's convenience methods. To load multiple files at once you could use Promise.all
将 return 一个单一的 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()
方法调用。此时您可以访问数据并执行其余代码。
我尝试从两个不同的来源加载数据。加载数据后,我想在防暴标签文件中使用它。但是我不明白怎么加载第二个文件,因为我不太懂异步调用。
我必须在代码中修改什么才能获取数据?现在,第二个数据对象是未定义的。这是我的代码:
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
})
})
d3-fetch module makes use of the Fetch API and will, therefore, return a Promise
for each request issued via one of the module's convenience methods. To load multiple files at once you could use Promise.all
将 return 一个单一的 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()
方法调用。此时您可以访问数据并执行其余代码。