javascript - 如何制作一个react + d3堆积条形图分组？

Question

我正在使用react + d3创建一个堆叠和分组的条形图，我将其堆叠起来，但找不到如何将其分组？

我想要像这样的图片

数据看起来像:

    const data = [
      {
        name: "Brand 1",
        Affiliate: 10,
        Social: 20,
        Media: 30
      },
      {
        name: "Brand 2",
        Affiliate: 20,
        Social: 40,
        Media: 60
      },
      {
        name: "Brand 3",
        Affiliate: 30,
        Social: 45,
        Media: 80
      },
      {
        name: "Brand 4",
        Affiliate: 40,
        Social: 60,
        Media: 100
      },
      {
        name: "Brand 5",
        Affiliate: 50,
        Social: 80,
        Media: 120
      }
    ];

生成堆栈的部分如下所示:

    const stackGenerator = stack().keys(keys);
    const layers = stackGenerator(data);

完整代码和demo可以在demo查看

任何有助于使其堆叠+分组的帮助将不胜感激

Answer 1

基于this example ，这样的东西应该可以工作:你可以找到整个示例 here .

const data = [
  {
    name: "Brand 1",
    type: 1,
    Affiliate: 10,
    Social: 20,
    Media: 30
  },
  {
    name: "Brand 1",
    type: 2,
    Affiliate: 20,
    Social: 40,
    Media: 60
  },
  {
    name: "Brand 2",
    type: 1,
    Affiliate: 30,
    Social: 45,
    Media: 80
  },
  {
    name: "Brand 3",
    type: 1,
    Affiliate: 40,
    Social: 60,
    Media: 100
  },
  {
    name: "Brand 3",
    type: 2,
    Affiliate: 50,
    Social: 80,
    Media: 120
  }
];

制作两个嵌套轴:

    const x0Scale = scaleBand()
      .domain(data.map((d) => d.name))
      .range([0, width])
      .padding(0.46);
    const x1Scale = scaleBand()
      .domain(data.map((d) => d.type))
      .rangeRound([0, x0Scale.bandwidth()])
      .padding(0.12);

并使条形的宽度取决于最小轴的宽度:

.attr("x", (sequence) => x0Scale(sequence.data.name)
                         + x1Scale(sequence.data.type))
.attr("width", x1Scale.bandwidth())

这会产生以下图片:

唯一的缺点是该解决方案假设每个组都有相同的成员 - 否则它不会吸引他们，正如您从“品牌 2”右侧的间隙中看到的那样。