在 d3.js 中加载 csv 时出现“data.forEach 不是函数”

Question

我正在为一项研究构建一个简单的反馈系统。我刚刚开始学习 JS 和 D3.js，但决定在 D3.js 中构建一些非常简单的绘图。但是，我收到以下错误消息，我不明白如何修复它？

(index):36 Uncaught (in promise) TypeError: data.forEach is not a function

我想用这个脚本做的是在 .csv 中取一行并将数字放在屏幕上。这是我的代码

const inter = setInterval(function() {
                updateData();
        }, 5000); 

// ** PLOG
function updateData() {

    // Get the data again
    d3.csv("lagplot.csv", function(error, data) {
        data.forEach(function(d) {
            d.finish = +d.FINISH;
            d.bib = +d.BIB;
        });
        

    // PLOT TEXT
        d3.select("text")   
            .data(data)
            .enter()
            .append("text")
                .attr("fill", "teal")
                .text(function(d) { return d.finish; })
            });
        }

这就是 csv 文件的样子

    Unnamed: 0  RANK  STA  RUN  BIB           NAME  INTER 1  INTER 1.1  INTER 1.2    INTER 2   INTER 2.1  INTER 2.2  FINISH     FINISH.1  FINISH.2   COURSE
33          33    34    9    4    2  OFTEBRO Einar     4.85       3.72         33  10.145.29  +8.10+4.38     3232.0  14.053  +11.28+3.18      32.0  LØYPE 3

Answer 1

根据docs，您传递给的函数d3.csv()不是回调，而是行转换函数- 您传递的(error, data)不仅仅是d（正在转换的行）。您应该跳过data.forEach并为此使用行转换函数，并将其余代码放在.then()回调中。

// Get the data again
d3.csv("lagplot.csv", function(d) {
    d.finish = +d.FINISH;
    d.bib = +d.BIB;
    return d;
}).then(function(data) {
    // PLOT TEXT
    d3.select("text")   
        .data(data)
        .enter()
        .append("text")
        .attr("fill", "teal")
        .text(function(d) { return d.finish; })
});