d3.组通过多个键给定的钥匙数组

Question

请参阅此处的工作小提琴：

” nofollow noreferrer“数据数组，用户为组提供了多个键。我想将 d3.groups 通过这些密钥进行分组。

在我的小提琴示例中，我知道我可以“手动”链接两个键以获取我想要的东西：

var gps = d3.groups(objs, d => d.Eye, d => d.Sex)

但是我硬编码 d.yee / 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

​com/porate/43973917/by-by-by-with-multiple-fields-using-d3-js> group by the comp by lother comply d3.js ，但问题很旧，我想知道是否d3 a - 基于基于的解决方案现在存在。 ？

Answer 1

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>