在 D3 v5 中從 CSV 檔案載入資料

在 D3 v4 中，使用 XMLHttpRequest 從 CSV 檔案載入資料非常簡單。然而，隨著 D3 v5 中 Promises 的引入，該過程發生了輕微變化。

使用 D3 v5

要使用 D3 v5 從 CSV 檔案載入數據，您需要可以利用 fetch() API。以下是修改程式碼的方法：

d3.csv('data/dataset.csv')
    .then(function(data) {
        if (error !== null) {
            alert ("Couldn't load the dataset!");
        } else {
            //do something
        };
    })
    .catch(function(error) {
        //handle error
    })

理解差異

D3 v4 和 D3 v5 之間的主要區別在於它們處理非同步請求的方式。 D3 v4 使用 XmlHttpRequest，它不回傳 Promise。因此，您向其傳遞一個回調函數，該函數在請求完成後運行。

相較之下，D3 v5 使用 Promise API，它允許您單獨處理成功和失敗的情況。 'then()' 函數用於處理成功情況，而 'catch()' 用於處理錯誤。

範例

以下程式碼片段提供如何使用D3 v5 從CSV 檔案載入資料的完整範例：

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

透過利用 Promise API，與 D3 v4 相比，D3 v5 提供了一種更結構化和靈活的方式來處理非同步資料載入。