javascript - 将数据从 Angular AJAX 调用加载到 D3 图中

Question

我在将 JSON 数据从外部 API 加载到 D3 图表时遇到一些问题。我正在使用 Quandl 的 API 加载一段时间内的布伦特原油价格，这是我试图绘制图表的数据。我在我的项目中使用 Angular，因此我设置了一个服务来进行 AJAX 调用，然后将其提供给范围。只要我不尝试涉及我的 D3 代码，我就能成功做到这一点。

当我这样做时，我收到几个错误:

GET http://localhost:3000/[object%20Object] 404 (Not Found)

还有这个:

Uncaught TypeError: Cannot read property 'forEach' of undefined

这与我的 d3 代码中的一些错误有关，我无法很好地理解。

这是产生错误的完整代码:

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) {
    d3.json(data, function(error, data) {
      if (error) {
        console.log(error);
      }

      data.forEach(function(d) {
        d.date = parseTime(d[0]);
        d.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([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));
    })
   })
  }
 }
})

(别介意乱七八糟的大括号)

Answer 1

Angular $http allready 反序列化数据。要么不调用 d3.json，要么让它处理请求而不调用 $http。

从https://www.quandl.com/api/v1/datasets/CHRIS/ICE_B1.json收到的数据遵循与您预期不同的格式。它们看起来像这样:

{
  //...
  "column_names": [ "Date","Open","High","Low","Settle","Change","Wave","Volume","Prev. Day Open Interest","EFP Volume","EFS Volume","Block Volume" ],
  "data": [
     ["2017-06-28",46.25,47.47,46.25,47.31,0.66,46.85,158984.0,149270.0,2218.0,null,1379.0],
     //...
}

要获得您想要的内容，您需要引用

oilService.getData()
  .then(function(response) {
    var mapped_data = response.data.data.map(function(d) {
        return {
           date: parseTime(d[0]),
           settle: d[4]
        };
     })

    //...

    svg.append("path")
       .data([mapped_data])
       //etc.
  })