9

我正在使用 NVD3 库根据 Rails 控制器中生成的数据制作简单的折线图。我用来在 Rails 中生成数据的代码是：

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}

然后，在我看来，我有以下 JS 代码：

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;
});

图表正确呈现，但是当我尝试将鼠标悬停在数据点上以显示工具提示时，我收到错误“Uncaught TypeError: Cannot read property 'x' of undefined”

4

3 回答 3

26

我遇到了同样的错误并被困了几个小时。经过一番调查，我发现我使用的是最新版本的d3.js ，它与最新版本的nvd3.js不兼容

确保您使用的是 nvd3 存储库中包含的 d3.js 版本：/lib/d3.v3.js

这很难找到。特别是因为nvd3 文档告诉您使用最新的 d3.js 版本；-(

于 2014-01-08T11:57:21.150 回答
4

如果您看到的Uncaught TypeError: Cannot read property 'x' of undefined可能是因为您的数据系列包含不同数量的点。

检查这是否只发生在一个系列中。

于 2013-10-26T06:08:26.810 回答
-2

确保您的数据是 JSON 格式，

以下是示例 JSON 数据的外观

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 : 这是NVD3 折线图的工作小提琴

于 2013-07-13T02:45:44.983 回答