NVD3 Line Chart Uncaught TypeError: Impossible de lire la propriété 'x' de undefined

Je suis en utilisant le NVD3 bibliothèque pour faire simple ligne les diagrammes basés sur les données qui sont générés dans les Rails de contrôleur. Le code que j'utilise pour générer des données dans des Rails est:

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}

Alors, de mon point de vue, j'ai le texte suivant du code 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;
});

Le tableau affiche correctement, mais lorsque je tente de passer la souris les points de données pour afficher l'info-bulle, j'obtiens l'erreur "Uncaught TypeError: Cannot read property 'x' undefined"

source d'informationauteur rushilg

  1. 26

    J'ai eu le même message d'erreur et est resté coincé pendant des heures. Après quelques recherches, j'ai découvert que j'ai été en utilisant la version la plus récente de d3.js qui n'était pas compatible avec la version la plus récente de nvd3.js

    Assurez-vous que vous utilisez le d3.js la version qui est inclus dans le nvd3 référentiel: /lib/d3.v3.js

    Qui a été assez difficile à trouver. En particulier parce que la nvd3 documentation vous dit d'utiliser la dernière d3.js version ;-(

  2. 3

    Si vous voyez un Uncaught TypeError: Cannot read property 'x' of undefined c'est peut-être parce que votre série de données contiennent un nombre différent de points.

    Vérifier si ce qui se passe avec une seule série.

  3. -2

    Assurez-vous que vos données sont dans un format JSON,

    Ici est de savoir comment l'échantillon de données JSON doit ressembler à

    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 :
    Ici, c'est un travail de violon d'un NVD3 Ligne graphique