如何解决在d3.js中加载CSV时出现“ data.forEach不是函数”
我正在为研究构建一个简单的反馈系统。我刚刚开始学习JS和D3.js,但是决定在D3.js中构建一些非常简单的图。但是,我收到以下错误消息,但我不知道该如何解决?
(索引):36未捕获(已承诺)TypeError:data.forEach不是函数
我要用这个脚本做的是在.csv中一行,然后将数字显示在屏幕上。这是我的代码
<input type="text" id="searchBox">
<a class="link" href="javascript:void(0)">Example 1</a>
<a class="link" href="javascript:void(0)">Example 2</a>
<a class="link" href="javascript:void(0)">Example 3</a>
<a class="link" href="javascript:void(0)">Example 4</a>
<script>
$(".link").on("click",function(){
$("#searchBox").val($(this).text());
});
</script>
这就是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; })
});
}
解决方法
根据docs,传递给d3.csv()
的函数不是回调,而是行转换函数-传递的不是{ {1}},但仅(error,data)
(正在转换的行)。您应该跳过d
并为此使用行转换功能,并将其余代码放入data.forEach
回调中。
.then()
,
您的代码很好。导致错误的原因是d3
版本之间的差异。网络上的大多数教程都是为v3
或v4
编写的,您以编写的方式在其中加载了csv。如果您尝试使用v5
或更高版本来执行此操作,则会收到错误消息。检查您的<script>
标签是否为d3
,然后将其更改为v4
或按照Klaycon在其答案中建议的行更改代码。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。