问题描述
我正在从Quandl的API中导入一些数据,以绘制多年来布伦特油价的图表.我正在使用Angular发出的HTTP请求提供数据.不知何故,正在提供服务的数据没有被读取为数字,因为出现以下错误:
I'm importing some data from Quandl's API to make a chart of brent oil prices over the years. I'm serving the data from a HTTP-request made with Angular. Somehow the data being served is not being read as numbers, since i get the following error:
app.service('oilService', function($http) {
delete $http.defaults.headers.common['X-Requested-With'];
this.getData = function() {
var URL = "https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json";
return $http({
method: 'GET',
url: URL
})
}
})
.directive('oilGraph', function() {
return {
scope: {},
controller: function(oilService) {
var width = 200;
var height = 100;
var parseTime = d3.timeParse("%y-%m-%d");
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var valueline = d3.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.settle); });
var svg = d3.select("#oilgraph").append("svg")
.attr("width", width)
.attr("height", height);
oilService.getData()
.then(function(data) {
var mapped_data = data.data.data.map(function(d) {
return {
date: parseTime(d[0]),
settle: d[4]
};
})
x.domain(d3.extent(data, function(d) { return d.date; }));
y.domain([0, d3.max(data, function(d) { return d.settle; })]);
svg.append("path")
.data([mapped_data])
.attr("class", "line")
.attr("d", valueline);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
})
})
}
}
})
推荐答案
您的问题只是一个错误的说明符.既然你的约会有世纪了...
Your problem is just a wrong specifier. Since your dates have the century...
"2017-06-16"
...您应该使用%Y
而不是%y
.根据 API :
... you should use %Y
instead of %y
. According to the API:
因此,这应该是您的说明符:
Thus, this should be your specifier:
var parseTime = d3.timeParse("%Y-%m-%d");
除此之外,您必须在秤中使用mapped_data
,而不是data
.
Besides that, you have to use mapped_data
in the scales, not data
.
这是您所做的更改的代码:
Here is your code with that changes:
var width = 500;
var height = 200;
var parseTime = d3.timeParse("%Y-%m-%d");
var x = d3.scaleTime().range([0, width]);
var y = d3.scaleLinear().range([height, 0]);
var valueline = d3.line()
.x(function(d) {
return x(d.date);
})
.y(function(d) {
return y(d.settle);
});
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height);
d3.json("https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json", function(data) {
var mapped_data = data.data.map(function(d) {
return {
date: parseTime(d[0]),
settle: d[4]
};
});
x.domain(d3.extent(mapped_data, function(d) {
return d.date;
}));
y.domain([0, d3.max(mapped_data, function(d) {
return d.settle;
})]);
svg.append("path")
.data([mapped_data])
.attr("class", "line")
.attr("d", valueline);
svg.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
svg.append("g")
.call(d3.axisLeft(y));
})
path {
fill: none;
stroke: black;
}
<script src="https://d3js.org/d3.v4.min.js"></script>
这篇关于"错误:<路径>属性d:预期数字"MNaN,NaNLNaN,NaNL…". " D3错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!