如何使用动态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 
});