如何在 D3 v5 中非同步載入 CSV 檔案資料？

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

在D3 v5 中，從CSV 檔案載入資料所需的方法與v4 略有不同。它的運作原理如下：

D3 v5 資料載入

在 v5 中，D3 使用 Fetch API，它傳回一個 Promise。這需要更新您的程式碼以處理非同步資料載入。例如：

<code class="javascript">d3.csv("data/dataset.csv")
  .then(function(data) {
    // Data is now available within the `data` variable
    // Perform your chart or visualization operations here
  })
  .catch(function(error) {
    // Handle data loading errors
  });</code>

與 D3 v4 的比較

在 D3 v4 中，資料載入使用 XMLHttpRequest 方法，該方法沒有傳回 Promise。因此，您的程式碼可能如下所示：

<code class="javascript">d3.csv("data/dataset.csv", function(data) {
    // Whole data set available in the `data` variable
    // Draw your chart here
});</code>

資料載入的非同步性質

請記住，CSV 資料載入是非同步的。因此，確保圖表的程式碼在資料載入函數內執行至關重要，以避免在資料準備好之前過早執行。

以上是如何在 D3 v5 中非同步載入 CSV 檔案資料？的詳細內容。更多資訊請關注PHP中文網其他相關文章！