javascript - 如何用组和汇总替换 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);