使用 d3.js 加载 csv 数据时出现问题答案

【问题标题】：Problems loading csv data with d3.js使用 d3.js 加载 csv 数据时出现问题
【发布时间】：2020-07-30 21:17:30
【问题描述】：

所以我一直在尝试为我自己的项目实现this 2D 可视化，但我在加载 CSV 数据而不是随机生成点时遇到问题。我的代码几乎与上面的链接相同，除了这个：

<script>
    let data_points = [];
    d3.csv("mnist2D.csv", function (d) {
        d.forEach(function (d,i) {
            data_points[i] = {
                x: +d.x,
                y: +d.y,
                name: 'Knowledge Element ' + i,
                group: +d.label,
                radius: +d.radius,
                frequency: +d.frequency
            };
        })

    ...remainder of the script

    //d3.csv end
    })
</script>

我在浏览器控制台返回的错误是

Uncaught TypeError: o.beforesend is undefined
    send 'https://d3js.org/d3.v3.min.js:1'
    n 'https://d3js.org/d3.v3.min.js:1'
    Cn 'https://d3js.org/d3.v3.min.js:1'
    e 'https://d3js.org/d3.v3.min.js:3'
    <anonymous> 'https://...../test2d:22' //Line of the d3.csv call

此代码与不使用 d3-zoom 和工具提示的 3D 版本完美配合，但在此代码中中断。我假设它与 d3.csv 异步有关，但我不是经验丰富的 JS 开发人员，也不知道如何调试这样的问题。使用 d3.js v5 会解决这个问题吗？任何帮助，将不胜感激。非常感谢！

【问题讨论】：

您正在使用 d3v3 并提及您的代码无需缩放即可工作。示例链接使用 d3 v4/5 实现缩放，这在 d3v3 中不起作用（例如：v4/5 中的 d3.zoom 是 v3 中的 d3.behavior.zoom）。您在调整示例代码时是否考虑了 v3 的差异？
没错，我切换到 v5 并且成功了！发布解决方案。

标签： javascript d3.js

【解决方案1】：

很有趣地解决了我自己的问题。切换到 d3 v5，加载数据没有问题。

<script>
    // Load in data (asynchronously)
    d3.csv("mnist2D.csv", function (data) {
        return {
            x: +data.x*50,
            y: +data.y*50,
            name: data.name,
            label: +data.label,
            radius: +data.radius,
            frequency: +data.frequency
        };
    }).then(function(data_points) {

    ...remainder of the script

    //d3.csv end
    })
</script>

【讨论】：