NVD3折线图未捕获TypeError：无法读取未定义的属性“x” [英] NVD3 Line Chart Uncaught TypeError: Cannot read property 'x' of undefined

问题描述

我使用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 =>然后，在我看来，我有以下JS代码：
 
 
 
 
 
 
 
 $ b 
  nv.addGraph（function（）{
 var chart = nv.models.lineChart（）
 .x ）{return dx;}）
 .y（function（d）{return dy;}）; 
 
 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：无法读取未定义的属性x
解决方案
我有同样的错误，经过一番调查，我发现我使用的是最新版本的 d3.js ，与 nvd3.js  
 $的最新版本不兼容b 
 $ b 
确保您使用的是nvd3存储库中包含的d3.js版本： / lib / d3.v3.js  
 
 
 
这很难找出来。特别是因为 nvd3文档会告诉您使用最新的d3.js版本;-( 
 
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"
解决方案
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 ;-(

                        
这篇关于NVD3折线图未捕获TypeError：无法读取未定义的属性“x”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！