如何使图例类似于D3 v6中的堆叠条形图(并更改图例的标签)？

// 导入D3库

// 创建包含数据的数组
const data = [
  { category: "A", value1: 10, value2: 20, value3: 30 },
  { category: "B", value1: 15, value2: 25, value3: 35 },
  { category: "C", value1: 20, value2: 30, value3: 40 }
];

// 使用堆叠布局函数创建堆叠数据
const stackData = d3.stack()
  .keys(["value1", "value2", "value3"])
  (data);

// 创建Y轴比例尺
const yScale = d3.scaleLinear()
  .domain([0, d3.max(stackData, d => d3.max(d, d => d[1]))])
  .range([height, 0]);

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

// 创建颜色比例尺
const colorScale = d3.scaleOrdinal()
  .domain(["value1", "value2", "value3"])
  .range(["#e41a1c", "#377eb8", "#4daf4a"]);

// 创建堆叠区域生成器
const area = d3.area()
  .x(d => xScale(d.data.category))
  .y0(d => yScale(d[0]))
  .y1(d => yScale(d[1]));

// 创建SVG元素
const svg = d3.select("body")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

// 将堆叠区域绑定到组元素上
const areas = svg.selectAll(".area")
  .data(stackData)
  .enter()
  .append("path")
  .attr("class", "area")
  .attr("d", area)
  .style("fill", d => colorScale(d.key));

// 创建图例组元素
const legend = svg.append("g")
  .attr("class", "legend")
  .attr("transform", `translate(${width - 100}, 20)`);

// 绑定图例数据到图例组元素上
const legendItems = legend.selectAll(".legend-item")
  .data(stackData)
  .enter()
  .append("g")
  .attr("class", "legend-item")
  .attr("transform", (d, i) => `translate(0, ${i * 20})`);

// 在图例组元素中创建矩形元素来表示颜色
legendItems.append("rect")
  .attr("width", 10)
  .attr("height", 10)
  .style("fill", d => colorScale(d.key));

// 在图例组元素中创建文本元素来表示标签，根据需要更改标签
legendItems.append("text")
  .attr("x", 15)
  .attr("y", 5)
  .text(d => d.key); // 可以在这里更改标签

// 根据需要对图例进行布局和样式设置