如何從 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 並返回一個需要以下代碼的承諾。

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 方法，並且不返回需要此代碼的承諾

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