我正在创建一个界面，用户可以单击具有csv名称的按钮，以便查看他们选择的图表组合数据。
我已经对它进行了设置，以便每个按钮单击都将CSV的名称添加到数组(称为chosenData)。然后，我使用for循环循环通过chosenData数组，从github抓取数据，并将所有数据推入另一个名为allData的数组。
然而，数据没有正确组合。我已经为这个问题绞尽脑汁好几个小时了，但还是没能解决，所以任何帮助都将是非常感谢的!
下面的代码。这里还有一个jsfiddle
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<title>combine CSVs</title>
</head>
<body>
<button id="arr1" class="button">arr1</button>
<button id="arr2" class="button">arr2</button>
<button id="arr3" class="button">arr3</button>
<button id="arr4" class="button">arr4</button>
<button id="arr5" class="button">arr5</button>
<script>
var parseTime = d3.timeParse("%Y-%m")
let chosenData = []
let allData = []
$('.button').on('click', d => {
let data = event.target.id
console.log(data)
chosenData.push(data)
console.log('chosenData', chosenData)
obtainData(chosenData)
})
function obtainData(chosenData) {
for (i = 0; i < chosenData.length; i++) {
let arrayName = chosenData[i]
let dailyData = axios.get("https://raw.githubusercontent.com/sprucegoose1/sample-data/main/" + chosenData[i] + ".csv")
.then(content => {
let single = content.data
let singleCSV = d3.csvParse(single)
singleCSV.forEach(d => {
d.value = +d.value
d.interval = +d.interval
d.time = +d.time
d.code = arrayName
d.date = parseTime(d.date);
})
console.log('single data', singleCSV)
allData.push(singleCSV)
})
}
const merge = allData.flat(1);
chartData(merge);
}
function chartData(allData) {
console.log('all data', allData)
// create a chart with combined data here
}
</script>
</body>
</html>问题可能是获取是异步的。在for循环中启动它们，但是在执行平坦化并调用chartData之前不等待它们。
您可以将循环中axios.get返回的承诺推入一个数组，然后在循环结束后使用Promise.all等待所有这些承诺在合并之前。