[英]d3.js : d3.min.js:1 Error: <path> attribute d: Expected number, “MNaN,NaNLNaN,NaN”
我导入了一个csv文件并尝试在d3上映射信息。 我想我已经适当地缩放了一切。 任何人都可以帮助我并指导我完成这项工作吗?
我收到以下错误:
d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".
csv文件中的数据如下:
------------------------------------------
| 00:00:01 | 1 |
------------------------------------------
| 00:05:01 | 2 |
------------------------------------------
| 00:10:01 | 3 |
------------------------------------------
| 00:15:01 | 5 |
------------------------------------------
这是代码。
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);
根据文档 ,解析CSV所得的所有值都是字符串:
请注意,值本身始终是字符串; 它们不会自动转换为数字。
您必须指定一个负责转换的访问器功能
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
};
}
作为副作用,这也将简化您的代码,因为它使您无需在每次访问值时进行转换。 这是完整的代码:
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]);
应该在之前
line = d3.svg.line()
.x(function(d) { return x(new Date(d.date)) })
.y(function(d) { return y(d.value) });
像这样
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) });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.