javascript - 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 站点上的示例已将键设置为“x”和“y”)

尝试添加访问器函数:

    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