如何用group和rollup替换d3js嵌套函数

Question

我正在努力将一些旧的d3js代码翻译到最新版本(V6(。旧函数nest()似乎已被弃用。从现在起，文档建议使用group()和rollup()，然而，它们没有给出任何真正好的例子，我很难用这些新函数实现相同的数据结构。

数据输入：

[
{
name: "Anton",
year: "1990"
},
{
name: "Anton",
year: "1990"
},
{
name: "Anton",
year: "1971"
},
{
name: "Markus",
year: "1981"
},
]

旧D3代码：

let nested = d3.nest()
.key(function (d) { return d.name })     
.key(function (d) { return d.year })
.rollup(function (leaves) { return leaves.length })
.entries(data)

输出(正确(：

[
{
key: "Anton"
values: [
{
key: "1990",
value: 2
}
{
key: "1971",
value: 1
}
]  
},
{
key: "Markus"
values: [
key: "1981"
value: 1
]
}
]

新代码

我尝试以不同的方式组合group和rollup，但最终总是使用另一种数据结构。我的结论是：

let rollup = d3.rollups(data, v => v.length, d => d.name, d => d.year);
let arrayFromRollup = Array.from(rollup, ([key, value]) => ({key, value}));

输出(错误(

[
{
key: "Anton"
values: [
["1990", 2],
["1971", 1]
]  
},
{
key: "Markus"
values: [
["1981", 1]
]
}
]

我很乐意提供任何建议，显然，我发现的大多数类似的问题/帖子都很旧，都适用于nest。

Answer 1

D3提供了出色的便利功能，但随着ES6的兴起，数组和对象的操作变得容易多了。您可以使用纯ES6方法实现这一点：

const input = [{
name: "Anton",
year: "1990"
},
{
name: "Anton",
year: "1990"
},
{
name: "Anton",
year: "1971"
},
{
name: "Markus",
year: "1981"
},
]
const expected = [
{
key: "Anton",
values: [
{
key: "1990",
value: 2
},
{
key: "1971",
value: 1
}
],
},
{
key: "Markus",
values: [
{
key: "1981",
value: 1,
}
],
},
];
// For ease of use, start with an object, we map key to values
// and unpack it later. The structure we go for now:
// { name: { year: count }}
const nameYearsCount = input.reduce((obj, {
name,
year
}) => {
if (!(name in obj)) {
obj[name] = {
[year]: 1
};
} else {
// I.e. if the year doesn't exist, default to zero
obj[name][year] = (obj[name][year] || 0) + 1
}
return obj;
}, {});
// Now transform it into the desired format
const result = Object.entries(nameYearsCount)
.map(([name, yearsCount]) => {
const values = Object.entries(yearsCount)
.map(([year, count]) => ({
key: year,
value: count
}));
return {
key: name,
values
};
});
console.log(result);

Answer 2

以下是一些关于组和汇总的好文档：https://observablehq.com/@d3/d3组

将以下内容放在可观察对象中作为示例：

d3.rollup(athletes, 
v => {return {values: {len: v.length, earn:d3.sum(v, d => d.earnings)}}; },
d => {return {key: d.nation}},
d => {return {key: d.sport}}
)