如何使用D3同时按多个键分组？

Question

此作品，但我想知道是否有比创建一个字符串，更好的方式a和b后来分裂它：

const data = [
    { a: 10, b: 20, c: 30, d: 40 },
    { a: 10, b: 20, c: 31, d: 41 },
    { a: 12, b: 22, c: 32, d: 42 }
];

d3.rollups(
    data,
    x => ({
      c: x.map(d => d.c),
      d: x.map(d => d.d)
    }),
    d => `${d.a} ${d.b}`
  )
  .map(([key, values]) => {
    const [a, b] = key.split(' ');
    return {a, b, ...values};
  });

// OUTPUT
// [
//   {a: "10", b: "20", c: [30, 31], d: [40, 41]},
//   {a: "12", b: "22", c: [32], d: [42]}
// ]

Answer 1

随着 d3 v7 的发布，现在有一种更好的方法可以使用新的d3.flatRollup.

const data = [
    { a: 10, b: 20, c: 30, d: 40 },
    { a: 10, b: 20, c: 31, d: 41 },
    { a: 12, b: 22, c: 32, d: 42 }
];

const result = d3.flatRollup(
    data,
    x => ({
      c: x.map(d => d.c),
      d: x.map(d => d.d)
    }),
    d => d.a,
    d => d.b
  );
console.log(result);

const flattened = result.map(([a, b, values]) => ({a, b, ...values}));
console.log(flattened);

<script src="https://cdn.jsdelivr.net/npm/d3-array@3.0.2/dist/d3-array.min.js"></script>