在這里查看作業小提琴：https ://jsfiddle.net/0qgtbk9r/9/
假設我有一個資料物件陣列，并且用戶提供了多個鍵來分組。我想利用d3.groups這些鍵進行分組。
對于我的小提琴示例，我知道我可以“手動”鏈接兩個鍵以獲得我想要的：
var gps = d3.groups(objs, d => d.Eye, d => d.Sex)
但我是硬編碼d.Eye/ d.Sex...
所以我的問題是，如果我提供一個鍵陣列來進行分組，如何獲得相同的結果......像這樣：
var gb_keys = ['Eye','Sex']
var gps = d3.groups(obj,d=>gb_key.map(x=>d.x)//Doesn't work but just a random idea/thought
這與使用 d3.js 的多個欄位的 Group by 相似/幾乎重復，但問題已經很老了，我想知道現在是否存在基于 d3 的解決方案。?
uj5u.com熱心網友回復：
d3.flatGroup和d3.flatRollup是在 v7 中引入的，它解決了您參考的另一個問題中解決的嵌套結構問題。
對于用戶定義的鍵陣列，您可以在d3.flatGroup（d3.groups等）中使用此方法：
var fields = ['Sex','Eye']
var gps = d3.flatGroup(
objs,
...fields.map(k => d => d[k]) // instead of d => d.Sex and d => d.Eye etc
)
作業示例：
顯示代碼片段
var fields = ['Sex','Eye']
var gps = d3.flatGroup(
objs,
...fields.map(k => d => d[k])
)
console.log(gps).as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<script>
const ds = `Sex,Age,Eye,Height
M,43,blue,190
M,31,brown,200
M,50,blue,175
M,58,blue,210
M,26,blue,181
M,22,brown,202
M,59,green,189
M,52,brown,198
M,26,green,203
M,54,brown,201
M,29,brown,202
M,44,brown,178
F,58,brown,135
F,56,green,169
F,41,brown,155
F,23,brown,131
F,34,green,151
F,43,green,155
F,39,brown,176
F,42,blue,174
F,38,green,176
F,31,green,149
F,41,green,161
F,37,blue,178
F,35,brown,157
F,33,brown,150
F,41,blue,138
F,33,blue,147
F,21,green,144
F,47,brown,176
F,22,brown,169
F,22,brown,164
F,53,blue,144`
var objs = d3.csvParse(ds)
</script>要滿足物件陣列而不是陣列陣列的要求，您可以這樣做：
var fields = ['Sex','Eye']
var gps = d3.flatGroup(
objs,
...fields.map(k => d => d[k])
);
var fields2 = fields.concat('values');
var gps2 = gps.map(
gp => Object.fromEntries(
fields2.map((_, i) => [fields2[i], gp[i]])
)
);
作業示例：
顯示代碼片段
var fields = ['Sex','Eye']
var gps = d3.flatGroup(
objs,
...fields.map(k => d => d[k])
);
var fields2 = fields.concat('values');
var gps2 = gps.map(
gp => Object.fromEntries(
fields2.map((_, i) => [fields2[i], gp[i]])
)
);
console.log(gps2);.as-console-wrapper { max-height: 100% !important; top: 0; }<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.3.0/d3.min.js"></script>
<script>
const ds = `Sex,Age,Eye,Height
M,43,blue,190
M,31,brown,200
M,50,blue,175
M,58,blue,210
M,26,blue,181
M,22,brown,202
M,59,green,189
M,52,brown,198
M,26,green,203
M,54,brown,201
M,29,brown,202
M,44,brown,178
F,58,brown,135
F,56,green,169
F,41,brown,155
F,23,brown,131
F,34,green,151
F,43,green,155
F,39,brown,176
F,42,blue,174
F,38,green,176
F,31,green,149
F,41,green,161
F,37,blue,178
F,35,brown,157
F,33,brown,150
F,41,blue,138
F,33,blue,147
F,21,green,144
F,47,brown,176
F,22,brown,169
F,22,brown,164
F,53,blue,144`
var objs = d3.csvParse(ds)
</script>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/471079.html
標籤：javascript d3.js 分组