nvd3とangular2でビジュアライゼーションに動的CSVデータを使用する方法

Question

返されたデータに基づいてCSVデータとプロットグラフを読み込もうとしています。コンソールにログオンしたときにデータが表示されることがありましたが、プロットされませんグラフ。コンソールからコピーしたデータを、データを返すように書かれた関数に置き換えると、グラフがプロットされます。私は何が欠けているのか分からない。

私のコードは、CSVファイルからデータを取得getCsvData（）関数は次のようになりますオブジェクト

export const AllData = { 
// populate the empty object with your data 

     discreteBarChart: getCsvData() 
    } 

にデータを取得する。この

// Options and Data definitions 

    declare let d3, nv: any; 

    export const ChartTypes = [ 
     'lineChart', 
     'discreteBarChart' 

     ]; 

    const color = d3.scale.category20() 

    export const AllOptions = { 

      discreteBarChart: { 
          chart: { 
          type: 'discreteBarChart', 
          height: 450, 
          margin : { 
           top: 20, 
           right: 20, 
           bottom: 50, 
           left: 55 
            }, 
          x: function(d){return d.label;}, 
          y: function(d){return d.value;}, 
          showValues: true, 
         valueFormat: function(d){ 
          return d3.format(',.4f')(d); 
          }, 
          duration: 500, 
          xAxis: { 
          axisLabel: 'X Axis' 
            }, 
         yAxis: { 
         axisLabel: 'Y Axis', 
         axisLabelDistance: -10 
           } 
           } 
         } 
       } 

次のようになります。

  function getCsvData(){ 


       d3.csv("app/test.csv", function(error, data){ 
       var dynamicData = data; 
       console.log(data) 
      // create an empty object that nv is expecting 
      var discreteBarChart = [ 
       { 
        key: "Cumulative Return", 
        values: [] 
       } 
     ]; 
      data.forEach(function (d){ 
      d.value = +d.value 
      discreteBarChart[0].values.push(d) 
     }) 



console.log('The data is'+JSON.stringify(discreteBarChart)) 
    }) 

     return discreteBarChart 

     } 

このような機能のアラートを作成しようとすると、私は定義されていません

alert(JSON.stringify(getCsvData())) 

問題が疑われる場合は、返された文を間違った場所に置きます。

Answer 1

非同期の方法で非同期のd3.csv()関数を使用しようとしているという問題があります。 return discreteBarChartに電話すると、すぐにデータ要求が完了するのを待たずにundefinedが返されます。あなたのデータが戻ってくるまでに、あなたはどこにも渡していません。

getCsvData()関数は、データが読み込まれたときに呼び出すコールバックを受け入れるか、より良い解決策と思われるJavaScript Promisesを使用する必要があります。約束を使用して

は、あなたのコードは次のようになります：

function getCsvData() { 
    return new Promise(function(resolve, reject) { 
    d3.csv("app/test.csv", function(error, data) { 
     var discreteBarChart = [{ 
     key: "Cumulative Return", 
     values: [] 
     }]; 
     data.forEach(function(d) { 
     d.value = +d.value 
     discreteBarChart[0].values.push(d) 
     }); 
     resolve(discreteBarChart); 
    }); 
    }); 
} 

getCsvData().then(function(data) { 
    // Use the data here to render your chart 
});