Javascript 如何做出反应+；d3堆叠条形图是否分组？

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

我想要像这样的图片

数据如下所示：

常数数据=[
{
名称：“品牌1”，
附属机构：10，
社会：20，
媒体：30
},
{
名称：“品牌2”，
附属机构：20，
社会：40，
媒体：60
},
{
名称：“品牌3”，
附属机构：30，
社会：45，
媒体：80
},
{
名称：“品牌4”，
附属机构：40，
社会：60，
媒体：100
},
{
名称：“品牌5”，
附属机构：50，
社会：80，
媒体：120
}
];

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

const stackGenerator=stack（）.keys（键）；
常量层=堆栈生成器（数据）；

您可以在中查看完整代码和演示

任何有助于将其堆叠和分组的帮助都将受到赞赏，类似这样的帮助应该有效：您可以找到整个示例

const数据=[
{
名称：“品牌1”，
类型：1，
附属机构：10，
社会：20，
媒体：30
},
{
名称：“品牌1”，
类型：2，
附属机构：20，
社会：40，
媒体：60
},
{
名称：“品牌2”，
类型：1，
附属机构：30，
社会：45，
媒体：80
},
{
名称：“品牌3”，
类型：1，
附属机构：40，
社会：60，
媒体：100
},
{
名称：“品牌3”，
类型：2，
附属机构：50，
社会：80，
媒体：120
}
];

制作两个嵌套轴：

常量x0Scale=scaleBand（） .domain（data.map（（d）=>d.name）） .范围（[0，宽度]） .填充（0.46）； 常量x1Scale=scaleBand（） .domain（data.map（（d）=>d.type）） .rangeRound（[0，x0Scale.bandwidth（）]）） .填充（0.12）； 并使钢筋的宽度取决于最小轴的宽度：

.attr（“x”，（序列）=>x0Scale（sequence.data.name）
+x1Scale（序列.数据.类型））
.attr（“宽度”，x1Scale.bandwidth（））

这将产生以下图片：

---

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

您希望如何对每个数据进行分组？我希望它看起来像所附的图像一样，这是您的意思吗？我的意思是，您如何知道两个或多个条形图将组合在一起？它们总是被两个分组吗？是否有要分组的属性？它们总是按两个分组，并希望根据名称属性分组