Biểu đồ đường dây NVD3 Loại không bắt buộcLỗi: Không thể đọc thuộc tính 'x' không xác định

Question

Tôi đang sử dụng thư viện NVD3 để tạo biểu đồ đường đơn giản dựa trên dữ liệu được tạo trong bộ điều khiển Rails. Mã Tôi đang sử dụng để tạo ra dữ liệu trong Rails là:

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} 

Sau đó, theo quan điểm của tôi, tôi có mã JS sau:

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

Biểu đồ làm cho đúng, nhưng khi tôi cố gắng điểm dữ liệu di chuột để hiển thị tooltip, tôi nhận được lỗi "của router lỗi Loại: không thể đọc thuộc 'x' không xác định"

Answer 1

Hãy chắc chắn rằng dữ liệu của bạn ở định dạng JSON,

Sau đây là cách JSON dữ liệu mẫu nên trông giống như

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 : Đây là một fiddle làm việc của một NVD3 Line chart

Answer 2

Nếu bạn đang nhìn thấy một Uncaught TypeError: Cannot read property 'x' of undefined nó là có thể bởi vì hàng loạt dữ liệu của bạn có chứa các số khác nhau của các điểm.

Kiểm tra xem điều này có xảy ra chỉ với một chuỗi không.

Answer 3

Tôi đã gặp lỗi tương tự và bị kẹt trong nhiều giờ. Sau một cuộc điều tra tôi phát hiện ra rằng tôi đang sử dụng phiên bản mới nhất của d3.js đó là không tương thích với phiên bản mới nhất của nvd3.js

Hãy chắc chắn rằng bạn đang sử dụng phiên bản d3.js được bao gồm trong kho lưu trữ nvd3: /lib/d3.v3.js

Điều đó khá phức tạp để tìm hiểu. Cụ thể là vì nvd3 documentation yêu cầu bạn sử dụng phiên bản d3.js mới nhất ;-(