角型AJAX呼び出しからのデータをD3グラフにロード

Question

外部APIからのJSONデータをD3グラフに読み込む際に問題があります。私はQuandlのAPIを使用して、一定期間に渡ってブレント油価格をロードしています。これは、グラフ化しようとしているデータです。プロジェクトでAngularを使用していますので、AJAXコールを作成してスコープに渡すサービスを用意しました。これは、私がD3コードに関与しようとしない限り、正常に実行できます。

私が行うとき、私はいくつかのエラーを取得：

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

と、この：

私がよく理解できない私のD3-コードにいくつかのエラーに関連付けられてい

Uncaught TypeError: Cannot read property 'forEach' of undefined

。

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. 
    })