使用NVD3.js的<circle>属性cx ="NaN"的值无效

Question

当使用barlinechart和nvd3.js时,我得到'属性cx ="NaN"'的值无效.显示图表,但yAxis显示错误的整数值(太低),并且在悬停它时图表上的工具提示不会弹出.输入数据如下.

js部分:

function drawCumulativeChart(selector, jsondata ){

    nv.addGraph(function() {
        var chart = nv.models.cumulativeLineChart()
                        .x(function(d) { return d[0] })
                        .y(function(d) { return d[1] })
                        .color(d3.scale.category10().range());

        chart.xAxis.tickFormat(function (d) {
            return d3.time.format("%m/%y")(new Date(d));
        });

        chart.yAxis.tickFormat(d3.format(',.2f'));

        d3.select(selector)
            .datum( **jsondata** ) 
            .transition().duration(500)
            .call(chart);

        nv.utils.windowResize(chart.update);

        return chart;
    }); 
}

jsondata:

[{
    "key":"usercount",
    "values":[
        ["2011-12-31T23:00:00.000Z",22],
        ["2012-01-31T23:00:00.000Z",45],
        ["2012-02-29T23:00:00.000Z",64],
        ["2012-03-31T22:00:00.000Z",86],
        ["2012-04-30T22:00:00.000Z",109],
        ["2012-05-31T22:00:00.000Z",123],
        ["2012-06-30T22:00:00.000Z",145],
        ["2012-07-31T22:00:00.000Z",174],
        ["2012-08-31T22:00:00.000Z",195],
        ["2012-09-30T22:00:00.000Z",207],
        ["2012-10-31T23:00:00.000Z",221],
        ["2012-11-30T23:00:00.000Z",235]
    ]
}] 

数据库原始数据格式:

[time:2012-01-01 00:00:00.0, count:2]

Answer 1

x的数据应该是通用时间整数(而不是日期字符串).请参阅:getTime()

我在我的项目中遇到了同样的问题,并尝试通过更改在x函数中进行转换

   .x(function(d) { return d[0] })

至:

   .x(function(d) { return d3.time.format("%Y-%m").parse(d[0]); })

显示的图表但仍然生成了NaN您遇到的.经过大量的调试,我只是改变了我的REST响应,以通用时间整数返回JSON数据,现在一切正常.

如果您的数据如下所示,您的图表应该没问题:

[{
   "key": "usercount",
   "values": [
      [1325372400000, 22],
      [1328050800000, 45]
   ]
}] 

在JavaScript控制台中,您可以测试:

> new Date("2011-12-31T23:00:00.000Z").getTime();
> 1325372400000