如何对react + d3堆叠条形图进行分组？

import React, { useEffect, useRef } from 'react';
import * as d3 from 'd3';

const StackedBarChart = ({ data }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    if (data && chartRef.current) {
      const svg = d3.select(chartRef.current);

      // 设置图表的宽度和高度
      const width = 500;
      const height = 300;

      // 创建比例尺
      const xScale = d3
        .scaleBand()
        .domain(data.map(d => d.group))
        .range([0, width])
        .padding(0.1);

      const yScale = d3
        .scaleLinear()
        .domain([0, d3.max(data, d => d.value)])
        .range([height, 0]);

      // 创建堆叠生成器
      const stack = d3.stack().keys(['value']);

      // 创建堆叠数据
      const stackedData = stack(data);

      // 创建颜色比例尺
      const colorScale = d3.scaleOrdinal(d3.schemeCategory10);

      // 创建坐标轴
      const xAxis = d3.axisBottom(xScale);
      const yAxis = d3.axisLeft(yScale);

      // 绘制坐标轴
      svg
        .append('g')
        .attr('transform', `translate(0, ${height})`)
        .call(xAxis);

      svg.append('g').call(yAxis);

      // 绘制堆叠条形图
      svg
        .selectAll('.bar-group')
        .data(stackedData)
        .enter()
        .append('g')
        .attr('class', 'bar-group')
        .attr('fill', d => colorScale(d.key))
        .selectAll('rect')
        .data(d => d)
        .enter()
        .append('rect')
        .attr('x', d => xScale(d.data.group))
        .attr('y', d => yScale(d[1]))
        .attr('height', d => yScale(d[0]) - yScale(d[1]))
        .attr('width', xScale.bandwidth());

      // 添加交互效果
      svg
        .selectAll('.bar-group rect')
        .on('mouseover', (event, d) => {
          // 鼠标悬停时的操作
        })
        .on('mouseout', (event, d) => {
          // 鼠标移出时的操作
        });
    }
  }, [data]);

  return <svg ref={chartRef}></svg>;
};

export default StackedBarChart;