如何在D3堆叠条形图中显示数据标签？

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

// 定义数据集
var data = [
  { category: "A", value1: 10, value2: 20 },
  { category: "B", value1: 15, value2: 25 },
  { category: "C", value1: 20, value2: 30 }
];

// 定义比例尺
var xScale = d3.scaleBand()
  .domain(data.map(function(d) { return d.category; }))
  .range([0, width])
  .padding(0.1);

var yScale = d3.scaleLinear()
  .domain([0, d3.max(data, function(d) { return d.value1 + d.value2; })])
  .range([height, 0]);

// 堆叠处理数据
var stack = d3.stack()
  .keys(["value1", "value2"])
  .order(d3.stackOrderNone)
  .offset(d3.stackOffsetNone);

var stackedData = stack(data);

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

svg.append("g")
  .attr("transform", "translate(0," + height + ")")
  .call(xAxis);

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

// 添加矩形和数据标签
var bars = svg.selectAll(".bar")
  .data(stackedData)
  .enter()
  .append("g")
  .attr("class", "bar")
  .attr("fill", function(d, i) { return color(i); });

bars.selectAll("rect")
  .data(function(d) { return d; })
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d.data.category); })
  .attr("y", function(d) { return yScale(d[1]); })
  .attr("height", function(d) { return yScale(d[0]) - yScale(d[1]); })
  .attr("width", xScale.bandwidth());

bars.selectAll("text")
  .data(function(d) { return d; })
  .enter()
  .append("text")
  .attr("x", function(d) { return xScale(d.data.category) + xScale.bandwidth() / 2; })
  .attr("y", function(d) { return yScale(d[1]) - 5; })
  .attr("text-anchor", "middle")
  .text(function(d) { return d[1] - d[0]; });