如何使用动态 CSV 数据通过 nvd3 和 angular2 进行可视化答案

【问题标题】：How to use dynamic CSV data for visualisation with nvd3 and angular2如何使用动态 CSV 数据通过 nvd3 和 angular2 进行可视化
【发布时间】：2017-04-04 05:11:45
【问题描述】：

我正在尝试加载 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()
   }

从 csv 中获取数据的 getCsvData() 函数如下所示：

          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()))

我怀疑问题是，我把返回的语句放错了地方。

【问题讨论】：

标签： javascript angular d3.js nvd3.js

【解决方案1】：

问题是您试图以同步方式使用异步d3.csv() 函数。当您调用return discreteBarChart 时，它会立即返回undefined，而无需等待您的数据请求完成。当您的数据返回时，您不会将其传递到任何地方。

您要么需要让 getCsvData() 函数接受一个回调，以便在数据加载时调用它，要么使用 JavaScript Promises，我认为这是一个更好的解决方案。

使用 Promise，您的代码可能如下所示：

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

【讨论】：