Question

我正在为研究构建一个简单的反馈系统。我刚刚开始学习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; })
            });
        }

Answer 1

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

.then()

Answer 2

您的代码很好。导致错误的原因是d3版本之间的差异。网络上的大多数教程都是为v3或v4编写的，您以编写的方式在其中加载了csv。如果您尝试使用v5或更高版本来执行此操作，则会收到错误消息。检查您的<script>标签是否为d3，然后将其更改为v4或按照Klaycon在其答案中建议的行更改代码。

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

2 个答案: