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，创建一个负责绘制条形图并负责加载其数据的类并不是一个好主意。

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

1 个答案: