javascript - 使用 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;
    }); 
}

json数据:

[{
    "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