使用 Object 創建 D3 條形圖

Question

我想使用 D3 v5 制作 D3 條形圖。 我似乎在任何地方都找不到這個解決方案。 我希望條形高度基於 object - 可以動態變化 - 而不是 D3 條形圖通常基於的數組。 I have been able to append both axes with the proper data to an SVG but I cannot figure out how to append the bars to the SVG using the object.

例如，我的 object 是

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

對於我的軸，y 軸是 0 到 200（使用 D3.nice()），x 軸是紅色、橙色、藍色、粉紅色。

關於如何適當地 append 酒吧的任何建議？

Answer 1

簡短的回答：你不能。

D3 data()方法只接受三件事：

• 一個數組¹ ;
• function；
• 沒有什么。

如果你想使用 object 作為數據結構，你必須繞過selecion.data() ，但是再使用 D3 就沒有意義了，也就是說，你應該只使用普通的 Javascript 創建你的 dataviz。

如果您仍想堅持使用 D3，請將 object 轉換為數組：

 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 等可迭代對象。}