NVD3 Liniendiagramm Uncaught TypeError: Kann die Eigenschaft 'x' von undefined nicht lesen

Question

Ich verwende die NVD3-Bibliothek, um einfache Liniendiagramme basierend auf Daten zu erstellen, die in einem Rails-Controller generiert werden. Der Code, den ich unter Verwendung von Daten in Rails zu erzeugen ist:

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} 

Dann meiner Meinung nach, ich habe den folgenden JS-Code habe:

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

Die Grafik macht richtig, aber wenn ich versuche, Mouseover-Datenpunkte den Tooltip zu zeigen, erhalte ich die Fehlermeldung „nicht abgefangene Typeerror: kann Eigenschaft‚x‘undefinierten lesen“

Answer 1

Stellen Sie sicher, Ihre Daten im JSON-Format ist,

Hier ist, wie die Probe JSON-Daten aussehen

sollte

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 : Hier eine Arbeits Geige eines NVD3 Line chart ist

Answer 2

Wenn Sie eine Uncaught TypeError: Cannot read property 'x' of undefined sehen es ist möglicherweise, weil Ihre Datenreihe eine unterschiedliche Anzahl von Punkten enthalten.

Überprüfen Sie, ob dies nur mit einer Serie geschieht.

Answer 3

Ich hatte den gleichen Fehler und blieb stundenlang stecken. Nach einigen Untersuchungen fand ich heraus, dass ich die neueste Version von d3.js wurde mit der nicht kompatibel zu der neuesten Version von nvd3.js war

Vergewissern Sie sich, dass Sie die d3.js Version verwenden das ist im nvd3 repository enthalten: /lib/d3.v3.js

Das war ziemlich schwierig zu finden. Insbesondere, weil die nvd3 documentation Ihnen sagt, dass Sie die neueste d3.js-Version verwenden sollen ;-(