如何在条形图出海中为不同的子组设置颜色

// 数据集
var dataset = [
  { subgroup: "A", value: 10 },
  { subgroup: "B", value: 20 },
  { subgroup: "C", value: 15 }
];

// 颜色映射
var colorMapping = {
  "A": "#ff0000",
  "B": "#00ff00",
  "C": "#0000ff"
};

// 创建SVG容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 400)
  .attr("height", 300);

// 绘制条形图
svg.selectAll("rect")
  .data(dataset)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 50; })
  .attr("y", function(d) { return 300 - d.value; })
  .attr("width", 40)
  .attr("height", function(d) { return d.value; })
  .attr("fill", function(d) { return colorMapping[d.subgroup]; });

// 添加图例
var legend = svg.selectAll(".legend")
  .data(Object.keys(colorMapping))
  .enter()
  .append("g")
  .attr("class", "legend")
  .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

legend.append("rect")
  .attr("x", 360)
  .attr("y", function(d, i) { return i * 20; })
  .attr("width", 18)
  .attr("height", 18)
  .attr("fill", function(d) { return colorMapping[d]; });

legend.append("text")
  .attr("x", 340)
  .attr("y", function(d, i) { return i * 20 + 9; })
  .attr("dy", ".35em")
  .style("text-anchor", "end")
  .text(function(d) { return d; });