如何在 D3 v5 中从 CSV 文件加载数据答案

【问题标题】：How to load data from a CSV file in D3 v5如何在 D3 v5 中从 CSV 文件加载数据
【发布时间】：2019-11-28 13:22:33
【问题描述】：

我正在尝试从 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 一起使用吗？

【问题讨论】：

The answer here 可能会为您指明正确的方向。它周围的 API 略有变化，现在它返回了一个 Promise。
看看changes markdown。
@pmkro 我无法将其作为重复项关闭，因为这个问题显然不是您链接的那个问题的重复项。最重要的是，您对此的回答是错误的（关于 OP 的问题），您甚至可以看到反对票。因此，请随意在此处复制该答案（没有堆栈 sn-ps，堆栈 sn-p 仅用于 running 代码）并删除该答案，因为它是错误的。
@GerardoFurtado 是的，在更合适的问题上重新发布答案。

标签： javascript d3.js

【解决方案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 函数中运行图表代码。

【讨论】：

删除了依赖版本。保留第 4 版代码供以后找到此内容的人使用。
@Bananasaurus 如果响应为 not ok，即 HTTP 状态不是 200-299，则返回的 Promise 将被拒绝。您可以使用.catch() 来处理这些错误。 D3 不会报告任何其他错误，也不会让您访问Response 对象。这已作为issue 提出，但被 Mike Bostock 拒绝，他鼓励在需要进一步错误处理时使用 Fetch API。
我收到了ReferenceError: fetch is not defined
@Zee 你用的是哪个浏览器？这应该适用于所有现代浏览器developer.mozilla.org/en-US/docs/Web/API/… 你可能需要一个 polyfill 来支持 IE 版本。

【解决方案2】：

@pmkro's answer 很好，但是如果你想使用 ES7 的 async/await 而不是 Promise.then:

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

doThings();

【讨论】：

我可以同步吗？有完整的例子吗？做 1 他们做 2？ doThings1(); doThings2();.