Invalid attribute value <circle> cx = "NaN" using NVD3.js

Question

I get an "Invalid value for the cx =" NaN "attribute when using barlinechart with nvd3.js. the chart is displayed, but yAxis shows the wrong integer values ​​(too low) and the tooltips on the chart do not appear when it hangs. The input is listed below.

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] ] }] 

raw dataformat database:

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

Answer 1

The data for x must be a universal integer time (not a date string). See: getTime ()

I ran into the same problem in my project and tried to convert to function x by changing

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

in

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

The graph displayed, but still generated, the NaN you encountered. After a lot of debugging, I just changed my REST answer to return JSON data with universal integers, and now everything works fine.

Your charts should be good if you get your data:

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

Using the JavaScript console, you can check:

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

Answer 2

I don’t know if the whole thing is, but what have I done to find similar problems. setting .y (function (d) {return d [1] * 1.0}) I don’t know why, but it somehow fixes the type of value