d3.js:d3.min.js:1 错误:<path> 属性 d:预期数字,“MNaN,NaNLNaN,NaN”
Posted
技术标签:
【中文标题】d3.js:d3.min.js:1 错误:<path> 属性 d:预期数字,“MNaN,NaNLNaN,NaN”【英文标题】:d3.js : d3.min.js:1 Error: <path> attribute d: Expected number, "MNaN,NaNLNaN,NaN" 【发布时间】:2016-09-12 03:42:55 【问题描述】:我导入了一个 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);
【问题讨论】:
所以这部分line = d3.svg.line() .x(function(d) return x(new Date(d.date)) ) .y(function(d) return y(d.value) );
似乎没有返回 d3 可以使用的数字。
您的 CSV 不是逗号分隔的?
【参考方案1】:
根据documentation,解析 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);
【讨论】:
【参考方案2】: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) );
【讨论】:
以上是关于d3.js:d3.min.js:1 错误:<path> 属性 d:预期数字,“MNaN,NaNLNaN,NaN”的主要内容,如果未能解决你的问题,请参考以下文章
使用 d3.js 和 TypeScript 绘制饼图时出现编译错误
D3.js 一直遇到这个错误 TypeError: Cannot read properties of null (reading 'ownerDocument')?