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

Question

我在从外部API将JSON数据加载到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

角$ HTTP媒体链接反序列化数据。要么不要调用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. 
    })