D3 折线图路径出错

Error with D3 line graph path

本文关键字：出错 路径 折线图 D3      更新时间：2023-09-26

盯着这段代码太久了，无法弄清楚为什么我会为日期部分或路径获取 NaN 值。我对 D3 仍然很陌生，但这看起来像我找到的示例以及我为这种类型的图形提供的其他一些类似的工作代码，所以我有点困惑。

本质上，导致问题的部分是返回 NaN 值的 x（） 函数。

除了使用本机 JS Date 函数外，我还尝试让 D3 解析日期，但得到同样的错误。

我在这里为此做了一个测试用例：http://tributary.io/inlet/fe23c00c6e3ed6d4b0de和代码笔，如果这更容易http://codepen.io/jamieholliday/pen/ogaLRg?editors=101

var svg = d3.select("svg");
var data = [{
      "date" : "2015-03-06",
      "score" : 30
    }, {
      "date" : "2015-02-06",
      "score" : 22
    }, {
      "date" : "2015-01-06",
      "score" : 43
    }, {
      "date" : "2014-12-06",
      "score" : 10
    }, {
      "date" : "2014-11-06",
      "score" : 38
    }, {
      "date" : "2015-02-20",
      "score" : 30
    }, {
      "date" : "2015-03-05",
      "score" : 44
    }, {
      "date" : "2015-03-11",
      "score" : 37
    } ];
var x = d3.time.scale()
    .domain(d3.extent(data, function(d) { return new Date(d.date);}))
                    .range(0, 500);
var y = d3.scale.linear()
        .domain([0, d3.max(data, function(d) {return d.score;})])
        .range([500, 0]);
var line = d3.svg.line()
    .x(function(d) { 
        return x(new Date(d.date));
    })
    .y(function(d) { 
        return y(d.score);
    });
svg.append('path')
    .attr('d', line(data))

您只需要确保使用数组来指定x比例的range：

.range([0, 500]);

而不是

.range(0, 500);

容易犯的错误！在这里摆弄：http://jsfiddle.net/henbox/os7xtkLk/。您还需要在绘制之前对日期进行排序

相关文章：