“错误：<路径> 属性 d：预期数字，“MNaN、NaNLNaN、NaNL…”。“ D3 错误

Question

我正在从 Quandl 的 API 导入一些数据，以制作多年来布伦特油价的图表。我正在提供来自 Angular 发出的 HTTP 请求的数据。不知何故，所提供的数据没有被读取为数字，因为我收到以下错误：

\n\n

\n

错误：属性 d：预期数字“MNaN、NaNLNaN、NaNL\xe2\x80\xa6”。

\n

\n\n

app.service(\'oilService\', function($http) {\n  delete $http.defaults.headers.common[\'X-Requested-With\'];\n  this.getData = function() {\n  var URL = "https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json";\n  return $http({\n     method: \'GET\',\n     url: URL\n  })\n }\n})\n\n.directive(\'oilGraph\', function() {\n return {\n  scope: {},\n  controller: function(oilService) {\n  var width = 200;\n  var height = 100;\n\n  var parseTime = d3.timeParse("%y-%m-%d");\n\n  var x = d3.scaleTime().range([0, width]);\n  var y = d3.scaleLinear().range([height, 0]);\n\n  var valueline = d3.line()\n      .x(function(d) { return x(d.date); })\n      .y(function(d) { return y(d.settle); });\n  var svg = d3.select("#oilgraph").append("svg")\n        .attr("width", width)\n        .attr("height", height);\n\n  oilService.getData()\n  .then(function(data) {\n\n      var mapped_data = data.data.data.map(function(d) {\n        return {\n          date: parseTime(d[0]),\n          settle: d[4]\n        };\n      })\n\n      x.domain(d3.extent(data, function(d) { return d.date; }));\n      y.domain([0, d3.max(data, function(d) { return d.settle; })]);\n\n      svg.append("path")\n          .data([mapped_data])\n          .attr("class", "line")\n          .attr("d", valueline);\n\n      svg.append("g")\n          .attr("transform", "translate(0," + height + ")")\n          .call(d3.axisBottom(x));\n\n      svg.append("g")\n          .call(d3.axisLeft(y));\n    })\n   })\n  }\n }\n})\n

\n

Answer 1

你的问题只是一个错误的说明符。既然你的日期有世纪...

"2017-06-16"

...你应该使用%Y而不是%y. 根据API：

%Y - 年份，世纪为十进制数。

因此，这应该是您的说明符：

var parseTime = d3.timeParse("%Y-%m-%d");

除此之外，你必须使用mapped_data秤，而不是data。

这是经过更改的代码：

"2017-06-16"

var parseTime = d3.timeParse("%Y-%m-%d");

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));

})