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

Question

当使用带有nvd3.js的barlinechart时，我得到'属性cx =“NaN”'的值无效。显示图表，但yAxis显示错误的整数值（太低），并且在悬停它时图表上的工具提示不会弹出。 输入数据如下所列。

js part：

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

Answer 2

我不知道这是否是每个人的情况，但我做的是解决类似的问题 设置.y（函数（d）{return d [1] * 1.0}） 我不知道为什么，但它以某种方式修复了值的类型