D3.js 中的数据透视

Question

我对 D3 很陌生，仍在学习。 我有以下布局的数据

date,A=quantity,A=order,B=quantity,B=order,C=quantity,C=order
2016-11-01,60,2,51,4,41,1
2016-12-01,73,2,58,4,41,1

并想转换为

date,category,quantity,order
2016-11-01,A,60,2
2016-11-01,B,51,4
2016-11-01,C,41,1
2016-11-01,A,73,2
2016-11-01,B,58,4
2016-11-01,C,41,1

如何使用 D3.js 做到这一点？

谢谢你的帮助！

Answer 1

不幸的是，在解析 CSV 时，您不能使用行转换 function，因为您想要一个比解析后的数组包含更多对象的数组（换句话说，您想要具有更多行的 ZCC8D68C551C4A9A6D5313E07DE4DEAFD 等价物）。

但是您可以轻松获得所有类别...

const categories = data.columns.reduce((a, c) => (c.includes("=") ? a.add(c.split("=")[0]) : null, a), new Set());

...然后创建您的自定义数据数组：

const newData = data.reduce((a, c) => {
  categories.forEach(cat => a.push({
    date: c.date,
    category: cat,
    quantity: c[`${cat}=quantity`],
    order: c[`${cat}=order`]
  }));
  return a;
}, []);

这是演示：

 const csv = `date,A=quantity,A=order,B=quantity,B=order,C=quantity,C=order 2016-11-01,60,2,51,4,41,1 2016-12-01,73,2,58,4,41,1`; const data = d3.csvParse(csv); const categories = data.columns.reduce((a, c) => (c.includes("=")? a.add(c.split("=")[0]): null, a), new Set()); const newData = data.reduce((a, c) => { categories.forEach(cat => a.push({ date: c.date, category: cat, quantity: c[`${cat}=quantity`], order: c[`${cat}=order`] })); return a; }, []); console.log(newData)

 <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>