Javascript Girl
  1. Javascript Girl
  3. D3.js: d3.min.js: 1 Erreur: attribut <path> d: Numéro prévu, "MNaN, NaNLNaN, NaN"
Intereting Posts
Faites une expression pour STRING.STRING.STRING sur PEG.js Utilisation d'un caractère non ASCII en tant que clé d'objet Javascript Rechérence Javascript Javascript asynchrone Vérifier si une fonction existe avec son nom dans une chaîne? Pouvez-vous combiner replace_html avec un effet visuel dans Rails RJS? JavaScript n'est pas correctement exécuté dans HtmlUnit Comment convertir svg en png en utilisant html5 canvas / javascript / jquery et enregistrer sur le serveur Comment puis-je ajouter "X-Content-Type-Options: nosniff" à tous les en-têtes de réponses de mon serveur Web Les modèles externes et "el" avec Knockout et RequireJS? Des paquets dans requireJS Échangez la classe CSS en fonction de la position de défilement avec Javascript Comment déterminer le meilleur "délai d'exécution" (délai d'interconnexion) à utiliser dans une boucle d'animation JavaScript? JavaScript / jQuery – Obtenez du texte et traduisez-le Expression pour "plus de x et moins que y"? Javascript envoyant des données via POST dans firefox addon

D3.js: d3.min.js: 1 Erreur: attribut <path> d: Numéro prévu, "MNaN, NaNLNaN, NaN"

J'ai importé un fichier csv et essayé de cartographier l'information sur d3. Je suppose que j'ai tout monter correctement. Est-ce que quelqu'un peut m'aider et me guider à travers ça?

Je reçois l'erreur suivante: 

d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".

Les données dans le fichier csv sont comme ceci: 

 ------------------------------------------ | 00:00:01 | 1 | ------------------------------------------ | 00:05:01 | 2 | ------------------------------------------ | 00:10:01 | 3 | ------------------------------------------ | 00:15:01 | 5 | ------------------------------------------

Voici le code. 

 var Chart = (function(window,d3) { var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path, margin = {}, width, height; d3.csv('Book1.csv', init); //load data, then initialize chart //called once the data is loaded function init(csv) { data = csv; //initialize scales xExtent = d3.extent(data, function(d,i) { return new Date(d.date) }); yExtent = d3.extent(data, function(d,i) { return d.value }); x = d3.time.scale().domain(xExtent); y = d3.scale.linear().domain(yExtent); //initialize axis xAxis = d3.svg.axis().orient('bottom'); yAxis = d3.svg.axis().orient('left'); //the path generator for the line chart line = d3.svg.line() .x(function(d) { return x(new Date(d.date)) }) .y(function(d) { return y(d.value) }); //initialize svg svg = d3.select('#chart').append('svg'); chartWrapper = svg.append('g'); path = chartWrapper.append('path').datum(data).classed('line', true); chartWrapper.append('g').classed('x axis', true); chartWrapper.append('g').classed('y axis', true); //render the chart render(); } function render() { //get dimensions based on window size updateDimensions(window.innerWidth); //update x and y scales to new dimensions x.range([0, width]); y.range([height, 0]); //update svg elements to new dimensions svg .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom); chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); //update the axis and line xAxis.scale(x); yAxis.scale(y); svg.select('.x.axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); svg.select('.y.axis') .call(yAxis); path.attr('d', line); } function updateDimensions(winWidth) { margin.top = 20; margin.right = 50; margin.left = 50; margin.bottom = 50; width = winWidth - margin.left - margin.right; height = 500 - margin.top - margin.bottom; } return { render : render } })(window,d3);

Selon la documentation, toutes les valeurs résultant de l'analyse du CSV seront des chaînes:

Notez que les valeurs elles-mêmes sont toujours des chaînes; Ils ne seront pas automatiquement convertis en nombres.

Vous devrez spécifier une fonction d'accesseur qui prend en charge la conversion 

 d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart function convert(d) { return { date: new Date(d.date), value: +d.value // convert string to number }; }

Comme effet secondaire, cela simplifiera également votre code car il vous évite de faire une conversion chaque fois que vous accédez aux valeurs. Voici le code complet: 

 var Chart = (function(window, d3) { var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line, path, margin = {}, width, height; d3.csv('Book1.csv', convert, init); //load data, convert, then initialize chart function convert(d) { return { date: new Date(d.date), value: +d.value // convert string to number }; } //called once the data is loaded function init(csv) { data = csv; //initialize scales xExtent = d3.extent(data, function(d, i) { return d.date; }); yExtent = d3.extent(data, function(d, i) { return d.value; }); x = d3.time.scale().domain(xExtent); y = d3.scale.linear().domain(yExtent); //initialize axis xAxis = d3.svg.axis().orient('bottom'); yAxis = d3.svg.axis().orient('left'); //the path generator for the line chart line = d3.svg.line() .x(function(d) { return x(d.date) }) .y(function(d) { return y(d.value) }); //initialize svg svg = d3.select('#chart').append('svg'); chartWrapper = svg.append('g'); path = chartWrapper.append('path').datum(data).classed('line', true); chartWrapper.append('g').classed('x axis', true); chartWrapper.append('g').classed('y axis', true); //render the chart render(); } function render() { //get dimensions based on window size updateDimensions(window.innerWidth); //update x and y scales to new dimensions x.range([0, width]); y.range([height, 0]); //update svg elements to new dimensions svg .attr('width', width + margin.right + margin.left) .attr('height', height + margin.top + margin.bottom); chartWrapper.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); //update the axis and line xAxis.scale(x); yAxis.scale(y); svg.select('.x.axis') .attr('transform', 'translate(0,' + height + ')') .call(xAxis); svg.select('.y.axis') .call(yAxis); path.attr('d', line); } function updateDimensions(winWidth) { margin.top = 20; margin.right = 50; margin.left = 50; margin.bottom = 50; width = winWidth - margin.left - margin.right; height = 500 - margin.top - margin.bottom; } return { render: render } })(window, d3); 
 x.range([0, width]); y.range([height, 0]);

Devrait avant 

 line = d3.svg.line() .x(function(d) { return x(new Date(d.date)) }) .y(function(d) { return y(d.value) });

Comme ça 

  x = d3.time.scale().domain(xExtent).range([0, width]); y = d3.scale.linear().domain(yExtent).range([height, 0]); line = d3.svg.line() .x(function(d) { return x(new Date(d.date)) }) .y(function(d) { return y(d.value) });