javascript - 使用 d3.csv 设置对象的数据属性

Question

使用 d3.csv() 设置其data属性以在其他地方使用的对象。缺点是这些都不起作用，因为 d3.csv() 是异步的。我该如何解决这个问题？

function BarChart(csvPath) {
  this.data = d3.csv('csvPath', function(csvData) {
    return csvData;
  });

  this.drawGraph = function() {
    // some code to draw a graph using this.data
  } 

  this.drawDataTable = function() {
    // some code to draw a graph using this.data
  }

  ... a bunch more code for using the data
}

在页面加载和事件处理程序中执行的一些代码。

var barChart = new BarChart('my_data.csv');
barChart.drawGraph();

$('button.viewPreview').click(function(){
  barChart.drawDataTable();
});

Answer 1

使 BarChart 接受ready回调（一个函数）

function BarChart(csvPath, ready) {
  var _this = this;
  d3.csv('csvPath', function(csvData) {
    _this.data = csvData
    ready()// invoke the callback
  });

  this.drawGraph = function() {
    // some code to draw a graph using this.data
  } 

  this.drawDataTable = function() {
    // some code to draw a graph using this.data
  }

  ... a bunch more code for using the data
}

实例化条形图时，提供ready回调：

var barChart = new BarChart('my_data.csv', function() {
  barChart.drawGraph();

  $('button.viewPreview').fadeIn();// unhide the button only when ready
});


$('button.viewPreview').click(function(){
  barChart.drawDataTable();
});

但是，IMO，让一个负责绘制条形图的类同时负责加载其数据并不是一个好主意。