javascript - 使用对象创建 D3 条形图

Question

我想使用 D3 v5 制作 D3 条形图。我似乎无法在任何地方找到这个解决方案。我希望条形高度基于一个对象 - 可以动态更改 - 而不是 D3 条形图通常基于的数组。我已经能够将带有正确数据的两个轴附加到 SVG，但我无法弄清楚如何使用对象将条形附加到 SVG。
例如，我的对象是

let Obj = {
    red: 102,
    orange: 168,
    blue: 154,
    pink: 197
}

对于我的 Axes，y 轴是 0 到 200(使用 D3.nice())，x 轴是红色、橙色、蓝色、粉红色。
关于如何适本地附加栏的任何建议？

Answer 1

简短的回答:你不能。
D3 data()方法只接受三件事:

一个数组1；

一个功能；

没有。

如果你想使用一个对象作为数据结构，你必须绕过 selecion.data() ，但是没有再使用 D3 的意义了，也就是说，您应该只使用普通的 Javascript 创建您的数据可视化。
如果您仍想坚持使用 D3，请将对象转换为数组:

let Obj = {
  red: 102,
  orange: 168,
  blue: 154,
  pink: 197
};

const data = Object.entries(Obj).map(([key, value]) => ({
  key: key,
  value: value
}));

console.log(data)

1:从D3 v6开始， data方法现在接受可迭代对象，例如 TypedArray、NodeList、Map、Set 等。