被我收到的 d3 错误难住了 - 错误：<path> 属性 d：预期数字，“M0，NaNL21.923076923…”答案

【问题标题】：Stumped by d3 error I'm receiving - Error: <path> attribute d: Expected number, "M0,NaNL21.923076923…"被我收到的 d3 错误难住了 - 错误：<path> 属性 d：预期数字，“M0，NaNL21.923076923…”
【发布时间】：2017-12-07 21:10:18
【问题描述】：

我正在尝试在 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

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

谢谢

【问题讨论】：

标签： javascript csv d3.js

【解决方案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);
    });

【讨论】：