nvd3折线图没有绘制正确的数据

Question

我目前正在尝试在Meteor JS中渲染一个nvd3折线图。我正在运行Meteor 1.1.0.3并在1.7.1版本上运行nvd3包。

使用nvd3：http://nvd3.org/examples/line.html上的示例，我得到了以下代码。但是，即使正确地遵循示例，图形也会绘制，但日期都是12/31/1969，y轴生成-1,0和1值。见附图：

谁能告诉我这里缺少什么？

nv.addGraph(function() {
    var chart = nv.models.lineChart()
        .margin({ left: 25 })
        .showLegend(true)
        .showXAxis(true)
        .showYAxis(true);

    chart.xAxis
        .axisLabel('Date')
        .tickFormat(function(d) { 
            return d3.time.format('%x')(new Date(d));
        });

    chart.yAxis
        .axisLabel('Data')
        .tickFormat(d3.format('d'));

    d3.select('#data-chart svg').datum(formattedData).call(chart);

    nv.utils.windowResize(chart.update);

    return chart;
});

formattedData = [
{
    key: 'Data', //key  - the name of the series.
    values: [{ date: 1439963723311, total: 3}, { date: 1441283002275, total: 1}, { date: 1441194849210, total: 2}], //values - represents the array of {x,y} data points
    color: '#ff0000' //color - optional: choose your own line color.
}
];

Answer 1

你需要告诉D3如何访问数据 - 什么是x，什么是y。

（NVD3网站上的示例已经包含了＆＃39; x＆＃39;以及＆＃39; y＆＃39;）

尝试添加访问者功能：

    var chart = nv.models.lineChart()
        .x(function (d) { return d.date })
        .y(function (d) { return d.total })        

如果你想确保y轴从0开始，请包括

        .forceY([0]);

此外，您需要确保事先对数据进行排序（最后两项无序）。

请参阅此Plunk以获取实时示例： http://plnkr.co/edit/QjcEXIIQ5aIhuFhpRwsj?p=preview