4

使用带有 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]
4

2 回答 2

8

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
于 2013-06-20T19:17:53.250 回答
0

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

于 2014-06-27T16:28:08.233 回答