NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

问题

I'm using the NVD3 library to make simple line charts based on data generated in a Rails controller. The code I'm using to generate data in Rails is:

task.task_values.each do |u|
 array.push({ :x => u.created_at.to_i * 1000, :y => u.value.to_i })
end
data_label = task.name + " ("+ task_unit +")"
taskValuesList = [{:key => data_label, :values => array}]
data = {:type => "line", :data => taskValuesList}

Then, in my view, I have the following JS code:

nv.addGraph(function() {
var chart = nv.models.lineChart()
  .x(function(d) { return d.x; })
      .y(function(d) { return d.y; });

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

d3.select('#chart<%= i %> svg')
  .datum(data.data)
  .transition().duration(500)
  .call(chart);

nv.utils.windowResize(chart.update);
  return chart;
});

The chart renders properly, but when I try to mouseover data points to show the tooltip, I get the error "Uncaught TypeError: Cannot read property 'x' of undefined"

回答1:

I had the same error and got stuck for hours. After some investigation I found out that I was using the most recent version of d3.js which was not compatible to the most recent version of nvd3.js

Make sure that you are using the d3.js version that is included in the nvd3 repository: /lib/d3.v3.js

That was quite tricky to find out. In particular because the nvd3 documentation tells you to use the latest d3.js version ;-(

回答2:

If you are seeing a Uncaught TypeError: Cannot read property 'x' of undefined it is possibly because your data series contain different numbers of points.

Check if this happens with only one series.

回答3:

Make sure your data is in JSON format,

Here is how the sample JSON data should look like

data = [{
    key : "Line 1",
    color : "#51A351",
    values : [{
        x : 1373403179000,
        y : 40
    }, {
        x : 1373403469000,
        y : 30
    }, {
        x : 1373403567000,
        y : 20
    }]
}, {
    key : "Line 2",
    color : "#BD362F",
    values : [{
        x : 1373403179000,
        y : 60
    }, {
        x : 1373403469000,
        y : 50
    }, {
        x : 1373403567000,
        y : 70
    }]
}]

UPDATE : Here is a working fiddle of a NVD3 Line chart

来源：https://stackoverflow.com/questions/17624111/nvd3-line-chart-uncaught-typeerror-cannot-read-property-x-of-undefined

标签

d3.js

nvd3.js