javascript - 被我收到的 d3 错误难住了 - 错误 : attribute d: Expected number, "M0,NaNL21.923076923…"

Question

我正在尝试转换 codepen ( https://codepen.io/jakelear-1472051722/pen/bRbqBB ) 上的 d3 迷你图示例，以便它从 csv 文件中提取数据。这是我的代码:

d3.csv("sparkline.csv", function (error, data) {

    if (error) throw error;

    // format the data
    data.forEach(function (d) {
        currentValue = +d.currentValue;

    });

    var graph = d3.select('.sparkline').append("svg").attr("width", "100%").attr("height", "100%");

    var height = parseInt(graph.style("height"));
    var width = parseInt(graph.style("width"));  

    var x = d3.scaleLinear()
        .domain([0, data.length])
        .range([0, width]);

    var y = d3.scaleLinear()
        .domain([0, d3.max(data)])
        .range([height, 0]);

    var line = d3.line()
        .x(function(d,i) {
            return x(i);
        })

        .y(function(d) {
            return y(currentValue);
        });

    graph.append("path")
        .data([data])
        .attr("class", "line")
        .attr("d", line);

});

我收到以下错误:d3.v4.js:1382 Error: attribute d: Expected number, "M0,NaNL21.923076923 ..." 一直在努力解决这个问题.

我的 CSV 文件的内容:

currentValue
2.0
2.3
1.9
1.7
1.7
2.2
2.3
2.2
2.0
2.1
1.9
2.0
1.6

非常感谢任何帮助。我确定这是我没看到的小东西。

谢谢

Answer 1

data 不是一个简单的平面数组，而是一个对象数组。

因此，应该是:

var y = d3.scaleLinear()
    .domain([0, d3.max(data, function(d){ return d.currentValue})])
    .range([height, 0]);

除此之外，请记住正确提供对对象的引用。在 forEach 循环中:

data.forEach(function (d) {
    d.currentValue = +d.currentValue;

});

在线生成器中:

var line = d3.line()
    .x(function(d,i) {
        return x(i);
    })

    .y(function(d) {
        return y(d.currentValue);
    });