Javascript d3.js:d3.min.js:1错误:<;路径>;属性d:预期的数字;“南,南,南”;
我导入了一个csv文件,并试图将信息映射到d3上。我想我已经把所有的东西都标好了。有人能帮我解决这个问题吗 我得到以下错误:Javascript d3.js:d3.min.js:1错误:<;路径>;属性d:预期的数字;“南,南,南”;,javascript,csv,d3.js,Javascript,Csv,D3.js,我导入了一个csv文件,并试图将信息映射到d3上。我想我已经把所有的东西都标好了。有人能帮我解决这个问题吗 我得到以下错误: d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…". 这是密码 var Chart = (function(window,d3) { var svg, data, x, y, xAxis, yAxis, dim, chartWrapper, line,
d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaNL…".
这是密码
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);
应该在
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) });
根据解析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);
所以这部分似乎是
line=d3.svg.line().x(函数(d){returnx(newdate(d.Date))}).y(函数(d){returny(d.value)})代码>没有返回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);