javascript - D3 折线图路径错误

Question

现在盯着这段代码太久了，无法弄清楚为什么我得到的日期部分或路径为 NaN 值。我对 D3 还很陌生，但这看起来像我找到的示例以及我针对此类图表的其他一些类似的工作代码，所以我有点困惑。

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

我没有使用原生 JS Date 函数，而是尝试让 D3 解析日期，但得到了相同的错误。

我在这里为此做了一个测试用例:http://tributary.io/inlet/fe23c00c6e3ed6d4b0de和一个codepen(如果这更容易的话) 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))

Answer 1

您只需确保使用数组来指定 x 比例的范围:

.range([0, 500]);

而不是

.range(0, 500);

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