select 数据通过单击按钮，然后将关联的 CSV 合并到一个数组中

Question

我正在创建一个界面，用户可以在其中单击具有 CSV 名称的按钮，以查看他们 select 绘制的组合数据。

我已将其设置为每次单击按钮都会将 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>

Answer 1

问题可能是提取是异步的。您在 for 循环中启动它们，但在进行展平并调用 chartData.

之前不等待它们

您可以将循环中 axios.get 返回的承诺推送到 ann 数组，然后在循环后使用 Promise.all 等待所有承诺，然后再合并。

select 数据通过单击按钮，然后将关联的 CSV 合并到一个数组中

select data by clicking buttons, then combine associated CSVs into one array

javascript

csv

arrays

merge