未捕获的类型错误：data.reduce 不是函数

Question

我正在尝试使用 d3.js v5 解压 csv 以进行数据可视化，但收到以下控制台错误：Uncaught TypeError: data.reduce is not a function这是我的代码中给我带来错误的部分：sample();function sample() {const data = d3.csv('../static/sample.csv');uncount = (data, accessor) =>  data.reduce((arr, item) => {    const count = accessor(item)    for (let i = 0; i < count; i++) {      arr.push({        ...item      })    }    return arr  }, []);const boxes = uncount(data, d => d.boxes);const nest = d3  .nest()  .key(d => d.venue)  .entries(boxes);}但是，如果我像这样切换数据对象（而不是 csv 中的行读取），它会起作用：const data = [{    "year": 2015,    "tour": "The Red Bullet",    "venue": "Rosemont theatre",    "capacity": 4400,    "boxes": 18  },  {    "year": 2017,    "tour": "Wings",    "venue": "Allstate arena",    "capacity": 18500,    "boxes": 74  },  {    "year": 2018,    "tour": "Love Yourself",    "venue": "United center",    "capacity": 23500,    "boxes": 94  },  {    "year": 2019,    "tour": "Love Yourself - Speak Yourself",    "venue": "Soldier Field",    "capacity": 61500,    "boxes": 246  }];这是因为 D3 v5 使用 fetch api 返回 Promise 吗？

Answer 1

这是因为 D3 v5 使用 fetch API 返回承诺吗？

是的。Promise 没有reduce方法。一个简单的解决方案是更改sample为async function，然后await更改值。

sample();

async function sample() {

  const data = await d3.csv('../static/sample.csv');

  uncount = (data, accessor) =>

    data.reduce((arr, item) => {

      const count = accessor(item)

      for (let i = 0; i < count; i++) {

        arr.push({

          ...item

        })

      }

      return arr

    }, []);

  const boxes = uncount(data, d => d.boxes);

  const nest = d3

    .nest()

    .key(d => d.venue)

    .entries(boxes);

}

请注意，异步函数始终返回一个承诺。