San*_*oor 20 javascript csv d3.js
我导入了一个csv文件并尝试在d3上映射信息.我想我已经适当地缩放了一切.任何人都可以帮助我并指导我完成这项工作吗?
我收到以下错误:
d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".
Run Code Online (Sandbox Code Playgroud)
csv文件中的数据如下:
------------------------------------------
| 00:00:01 | 1 |
------------------------------------------
| 00:05:01 | 2 |
------------------------------------------
| 00:10:01 | 3 |
------------------------------------------
| 00:15:01 | 5 |
------------------------------------------
Run Code Online (Sandbox Code Playgroud)
这是代码.
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);
Run Code Online (Sandbox Code Playgroud)
alt*_*lus 16
根据文档,解析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
};
}
Run Code Online (Sandbox Code Playgroud)
作为副作用,这也将简化您的代码,因为它使您无需在每次访问值时进行转换.这是完整的代码:
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);
Run Code Online (Sandbox Code Playgroud)