我有这个混乱而丑陋的嵌套json解析调用(！！(，我正在尝试简化，我希望使用d3.queue。函数doFirstChart使用第一个 json 在进行一些基本排版后制作图表。该函数制作图表，并返回一些额外的数据，这些数据与第二个 json 文件和函数的另一个用户定义参数一起使用，doSecondChart做下一个图表。
var c = 'someValue'
d3.json(countryJson, function (data) {
data.forEach(function (d) {
d.Country_Num = +d.Country_Num
d.y = +d.Y
d.x = +d.X
});
dataOut = doFirstChart(data);
d3.json(salesJson, function (salesData) {
salesData.forEach(function (d) {
d.Expt = +d.Expt
d.x = +d.x
d.y = +d.y
});
doSecondChart(dataOut, salesData, c)
console.log("Done!!")
});
});
听起来d3.queue是这些情况的合适工具，但是即使使用简化的示例，我也未能使其工作。例如(忽略exta参数c(以下我希望做技巧，但显然我没有正确使用它。
d3.queue()
.defer(d3.json, 'pathtocountrydata')
.await(doFirstChart)
.defer(d3.json, 'pathtosalesdata')
.await(doSecondChart)
我什至没有做对最简单的：
d3.queue()
.defer(d3.json, 'pathtocountrydata')
.await(doFirstChart)
请问这是怎么回事？
在等待后使用Defer会抛出错误，请更改以下内容：
d3.queue()
.defer(d3.json, 'pathtocountrydata')
.await(doFirstChart)
.defer(d3.json, 'pathtosalesdata')
.await(doSecondChart)
对此：
d3.queue()
.defer(d3.json, 'pathtocountrydata')
.defer(d3.json, 'pathtosalesdata')
.await(splitCharts)
其中函数splitCharts(err, ...args)为：
function splitCharts(err, ...charts){
doFirstChart(charts[0]);
doSecondChart(charts[1]);
}
您遇到的问题是使用 defer after and await，可能是您的函数参数，这是您意想不到的地方(错误，...参数(作为参数。
此示例将console.log队列过程，因此您可以从那里开始工作：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/d3-queue.v3.min.js"></script>
</head>
<body>
<script>
function doFirstChart(err, ...args) {
console.log('[FUNC]: ', args);
}
d3.queue()
.defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
.defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
.await(doFirstChart)
</script>
</body>
</html>
注意：如果要将自定义参数传递给.await()回调，则必须定义doFirstChart函数如下：
function doFirstChart(myParam){
// Now you'll return an anonymous function as first step
return (err, ...args) => {
// Here you'll do your thing, like rendering the data
console.log('My Param: ', myParam); // Your Custom param
console.log('[FUNC]: ', args); // As before
}
}
因此，现在您可以将<script></script>标签更改为：
<script>
const paramTest = 'Testa Rossa';
function doFirstChart(myParam) {
return (err, ...args) => {
console.log('My Param: ', myParam);
console.log('[FUNC]: ', args);
}
}
d3.queue()
.defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
.defer(d3.json, 'https://gist.githubusercontent.com/GbalsaC/db387adae4e84e999960ef79267ceada/raw/0cf2b08280452c7dbb04f81fafcb304bb841bc36/test1.json')
.await(doFirstChart(paramTest)) // do a first param declaration
</script>