如何使用動態CSV數據與nvd3和angular2可視化

Question

我想加載CSV數據和繪圖基於返回的數據。我可以看到數據登錄到控制檯時，但它不會被繪製在圖表。當我使用寫入的函數替換從控制檯複製的數據以返回數據時，圖形會被繪製。我不知道我錯過了什麼。

我的代碼看起來像這樣

// 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 
           } 
           } 
         } 
       } 

獲取數據到對象

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

     discreteBarChart: getCsvData() 
    } 

的getCsvData（）函數，從CSV得到數據如下：

  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 

     } 

當我試圖做這樣的功能提醒時，我得到了undefined

alert(JSON.stringify(getCsvData())) 

我懷疑問題是，我把返回的語句放在錯誤的地方。

Answer 1

問題是您正嘗試以同步方式使用異步d3.csv()函數。當您致電return discreteBarChart時，它立即返回undefined而不等待您完成數據請求。當你的數據回來時，你並沒有將它傳遞到任何地方。

要麼你需要讓你的getCsvData()函數接受回調爲它的數據負載時打電話，或者使用JavaScript承諾，我認爲將是一個更好的解決方案。

使用的承諾，你的代碼可能是這個樣子：

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