d3.js : d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN"
50,091
Solution 1
According to the documentation all values resulting from parsing the CSV will be strings:
Note that the values themselves are always strings; they will not be automatically converted to numbers.
You will have to specify an accessor function which takes care of the 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
};
}
As a side-effect this will also simplify your code because it frees you from having to do a conversion every time you access the values. Here is the full code:
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);
Solution 2
x.range([0, width]);
y.range([height, 0]);
Should before
line = d3.svg.line()
.x(function(d) { return x(new Date(d.date)) })
.y(function(d) { return y(d.value) });
Like this
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) });
Comments
-
Sanchit Kapoor over 1 year
I imported a csv file and tried to map the info on d3. I guess I have scaled everything properly. Can anyone help me out and guide me through this?
I get the following error:
d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".
The data in the csv file is like this:
------------------------------------------ | 00:00:01 | 1 | ------------------------------------------ | 00:05:01 | 2 | ------------------------------------------ | 00:10:01 | 3 | ------------------------------------------ | 00:15:01 | 5 | ------------------------------------------
Here's the 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);
-
Craicerjack about 8 yearsso it seems this part
line = d3.svg.line() .x(function(d) { return x(new Date(d.date)) }) .y(function(d) { return y(d.value) });
isnt returning numbers that d3 can use. -
epascarello about 8 yearsYour CSV is not comma delimitated?
-