如何访问d3.csv返回Promise内的数据数组，应在Chart类还是实例处理

API 探路者

2026-9-30

解决方案

你现在传入Chart构造函数的data是Promise实例，无法直接同步读取内部的[[PromiseResult]]值，需要等待Promise异步resolve后才能拿到目标数组。两种处理方案如下：

方案1：在Chart类内部处理（更推荐）

这种方案将异步数据加载的逻辑封装在类内部，对外暴露的使用逻辑更简洁，也方便后续类的复用。
修改后的类代码示例：

class Chart{
  constructor(opts){
    // 先存储传入的Promise实例
    this.dataPromise = opts.data;
    this.element = opts.element;
    // 调用异步初始化方法
    this.init();
  }

  // 异步初始化逻辑，等待数据加载完成后再执行绘制
  async init() {
    this.data = await this.dataPromise;
    this.draw();
  }

  draw() {
    // 这里的this.data就是你需要的数组，可以直接使用
    console.log(this.data);
    // 后续绘制逻辑写在这里即可
  }
}

外部实例化的代码不需要做任何修改，按你原来的写法传入Promise形式的data即可。

方案2：在实例化环节处理

如果不想改动原有Chart类的代码，可以先等待数据加载完成，再传入真实数组实例化Chart：

// 先加载处理数据
d3.csv('d1.csv', function(d){
  function removeNaN(e,c){
    return e>0 ? e : c
  }
  return { 
    date: d3.timeParse("%Y-%m-%d")(d.Date),
    aapl : d.AAPL, tsla : d.TSLA,
    aapl_sma: removeNaN(+d.SMA_AAPL,d.AAPL),
    tsla_sma: removeNaN(+d.SMA_TSLA,d.TSLA)
  }
}).then(data => {
  // 拿到真实数组后再实例化Chart
  const chart = new Chart({
    element: document.querySelector('#graph'),
    data: data
  })
})

这种方案下你原本的Chart类代码不需要做任何调整，draw方法中可以直接读取this.data使用。