D3.js折线图-错误:<路径>属性d:预期数字 [英] D3.js Line Graph - Error: <path> attribute d: Expected number
本文介绍了D3.js折线图-错误:<路径>属性d:预期数字的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试使用示例创建数据可视化.我正在尝试将自己的数据放入其中,但是我遇到了一些错误,并且看到了其他人的类似问题,但是仍然无法弄清楚出了什么问题.我遇到的错误是:
I'm trying to create a data visualisation using this example. I'm trying to put my own data in it but I have a few errors and I've seen other people's similar questions but, still I can't figure out what's wrong. The errors I'm getting are:
错误:属性d:预期数字"MNaN,251.47058823…".
错误:属性d:预期数字"MNaN,198.52941176…".
Error: attribute d: Expected number, "MNaN,251.47058823…".
Error: attribute d: Expected number, "MNaN,198.52941176…".
我的代码是:
var margin = {top: 20, right: 80, bottom: 30, left: 50},
width = 900 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var parseTime = d3.timeParse("%Y%m%d");
var x = d3.scaleTime().range([0, width]),
y = d3.scaleLinear().range([height, 0]),
z = d3.scaleOrdinal(d3.schemeCategory10);
var xAxis = d3.axisBottom(x)
yAxis = d3.axisLeft(y);
var color = d3.scaleOrdinal(d3.schemeCategory10);
var line = d3.line()
.curve(d3.curveBasis)
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.number); });
var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
d3.csv("testData3.csv", function(error, data) {
color.domain(d3.keys(data[0]).filter(function(key) {
return key !== "date";
}));
data.forEach(function(d) {
d.date = parseTime(d.date);
});
var initials = color.domain().map(function(name) {
return {
name: name,
values: data.map(function(d) {
return {
date: d.date,
number: +d[name]
};
})
};
});
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([d3.min(initials, function(c) { return d3.min(c.values, function(v) { return v.number; });}),
d3.max(initials, function(c) { return d3.max(c.values, function(v) { return v.number; });})]);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", ".71em")
.style("text-anchor", "end")
.text("Temperature (ºC)");
var initial = svg.selectAll(".initial")
.data(initials)
.enter().append("g")
.attr("class", "initial");
initial.append("path")
.attr("class", "line")
.attr("d", function(d) {
return line(d.values);
})
.style("stroke", function(d) {
return color(d.name);
});
});
然后我创建了这个数据集"来对其进行测试:
And I created this 'dataset' to test it:
date,GN,RM
1990-01-01,10,14
1991-01-01,8,15
1992-01-01,14,11
1993-01-01,22,8
1994-01-01,25,3
1995-01-01,21,4
1996-01-01,17,1
1997-01-01,19,-2
1998-01-01,20,-5
1999-01-01,20,-3
1990-02-01,16,4
1991-02-01,9,9
1992-02-01,-3,13
1993-02-01,2,15
1994-02-01,7,19
1995-02-01,7,20
1996-02-01,12,21
1997-02-01,16,26
1998-02-01,18,24
1999-02-01,19,29
提前谢谢!
推荐答案
您的麻烦是:
var parseTime = d3.timeParse("%Y%m%d");
您的日期不是这种格式,请尝试:
Your dates are not in that format, try:
var parseTime = d3.timeParse("%Y-%m-%d");
这是一个正在运行的 plunker .
这篇关于D3.js折线图-错误:<路径>属性d:预期数字的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文