如何从D3 v5中的CSV文件加载数据

Question

我正在尝试从D3中的CSV文件加载数据; 我有这个代码:

function update (error, data) {
    if (error !== null) {
        alert ("Couldn't load the dataset!");
    } else {
        //do something
    };

function changeData () {
    d3.csv ("data/dataset.csv", update);
}

如果我使用D3 v4它工作正常,但如果我切换到v5它不再工作.有人可以向我解释如何修改代码以使其适用于D3 v5吗？

Answer 1

d3 v5使用fetch API并返回需要以下代码的promise.

d3.csv('yourcsv.csv')
  .then(function(data) {
      // data is now whole data set
      // draw chart in here!
  })
  .catch(function(error){
     // handle error   
  })

如果将来人们想要v4.另一方面,d3 v4使用XMLHttpRequest方法,并且不返回需要此代码的promise

d3.csv('yourcsv.csv', function(data) {
    //whole data set
    // draw chart here
})

csv加载是异步的,因此请确保在csv函数中运行图表代码.

Answer 2

@pmkro 的回答很好，但是如果您想使用 ES7 async / await而不是 Promise.then：

async function doThings() {
  const data = await d3.csv('yourcsv.csv');
  // do whatever with data here
}

doThings();