Javascript ';data.forEach不是一个函数';在d3.js中加载csv时
我正在为一项研究建立一个简单的反馈系统。我刚刚开始学习JS和D3.JS,但决定在D3.JS中构建一些非常简单的绘图。但是,我收到以下错误消息,我不知道如何修复它 (索引):36未捕获(承诺中)类型错误:data.forEach不是函数 我想用这个脚本做的是在.csv中取一行,并将数字显示在屏幕上。这是我的密码Javascript ';data.forEach不是一个函数';在d3.js中加载csv时,javascript,d3.js,Javascript,D3.js,我正在为一项研究建立一个简单的反馈系统。我刚刚开始学习JS和D3.JS,但决定在D3.JS中构建一些非常简单的绘图。但是,我收到以下错误消息,我不知道如何修复它 (索引):36未捕获(承诺中)类型错误:data.forEach不是函数 我想用这个脚本做的是在.csv中取一行,并将数字显示在屏幕上。这是我的密码 const inter = setInterval(function() { updateData(); }, 5000); // *
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
根据,传递给d3.csv()的函数不是回调函数,而是行转换函数-传递的不是(错误、数据)
,而是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; })
});
根据,传递给d3.csv()的函数不是回调函数,而是行转换函数-传递的不是(错误、数据)
,而是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; })
});
你的代码很好。导致错误的原因是d3版本的差异。web上的大多数教程都是为
v3
或v4
编写的,您可以按照编写的方式加载CSV。如果您尝试使用v5
或更高版本执行此操作,则会出现错误。检查
标签上的d3
,将其更改为v4
,或者按照Klaycon在回答中建议的行更改代码。您的代码很好。导致错误的原因是d3版本的差异。web上的大多数教程都是为v3
或v4
编写的,您可以按照编写的方式加载CSV。如果您尝试使用v5
或更高版本执行此操作,则会出现错误。检查
标签上的d3
并将其更改为v4
,或者按照Klaycon在回答中建议的行更改代码。您是否检查了devtools的网络选项卡以查看文件是否已实际加载?控制台中是否显示任何错误?error
参数是否包含任何内容?因为data
可能是null
或数组以外的内容。您是否检查了devtools的“网络”选项卡以查看文件是否已实际加载?控制台中是否显示任何错误?error
参数是否包含任何内容?因为数据
可能是null
或数组以外的内容。谢谢。我从中得到了灵感。我只是想知道我现在如何实现自动复习?谢谢。我从中得到了灵感。我只是想知道现在如何实现自动复习?