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

IT技术 javascript d3.js
2021-02-08 06:33:28

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

2个回答

d3 v5使用 fetch API 并返回一个需要以下代码的Promise。

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 方法,并且不返回需要此代码的Promise

d3.csv('yourcsv.csv', function(data) {
    //whole data set
    // draw chart here
})

csv 加载是异步的,因此请确保在 csv 函数中运行您的图表代码。

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

@pmkro 的回答很好,但是如果您想使用 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();.
2021-03-25 06:33:28