D3 折线图路径错误

Question

现在盯着这段代码看得太久了，无法理解为什么我得到日期部分或路径的 NaN 值。我对 D3 还是很陌生，但这看起来像我找到的例子以及我为这种类型的图表准备的一些其他类似的工作代码，所以我有点难过。

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

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

我在这里做了一个测试用例：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

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

.range([0, 500]);

而不是

.range(0, 500);

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

D3 折线图路径错误

Error with D3 line graph path

javascript

d3.js