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

Posted 2023-02-22

【中文标题】如何在 D3 v5 中从 CSV 文件加载数据

【英文标题】：How to load data from a CSV file in D3 v5

【发布时间】：2018-09-10 23:40:32

【问题描述】：

我正在尝试从 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 是的，在更合适的问题上重新发布答案。

【参考方案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();.