d3.js: d3.min.js: 1 Erreur: & lt; path & gt; attribut d: numéro attendu, "MNaN, NaNLNaN, NaN"
J'ai importé un fichier csv et a essayé de la carte de l'info sur le d3. Je suppose que j'ai mis à l'échelle de tout correctement. Quelqu'un peut-il m'aider et me guider à travers cette?
J'obtiens l'erreur suivante:
d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".
Les données dans le fichier csv est 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);
source d'informationauteur Sanchit Kapoor
Vous devez vous connecter pour publier un commentaire.
Selon la la documentation toutes les valeurs résultant de l'analyse de la CSV sera chaînes:
Vous devrez spécifier une fonction d'accès qui prend en charge la conversion
Comme un effet secondaire cela permettra également de simplifier votre code, car il vous évite de devoir faire une conversion à chaque fois que vous accédez à des valeurs. Voici le code complet:
Doit avant
Comme ce