在 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 提供了一种更加结构化和灵活的方式来处理异步数据加载。