调整d3水平堆叠条形图的条形内的文本

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

// 数据
var 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 }
];

// 堆叠处理
var stack = d3.stack()
  .keys(["value1", "value2", "value3"]);
var stackedData = stack(data);

// 创建矩形元素
var rects = svg.selectAll("rect")
  .data(stackedData)
  .enter()
  .append("rect")
  .attr("x", function(d) { return xScale(d[0][0]); })
  .attr("y", function(d) { return yScale(d.data.category); })
  .attr("width", function(d) { return xScale(d[0][1]) - xScale(d[0][0]); })
  .attr("height", yScale.bandwidth())
  .attr("fill", function(d) { return colorScale(d.key); });

// 创建文本元素
var texts = svg.selectAll("text")
  .data(stackedData)
  .enter()
  .append("text")
  .attr("x", function(d) { return xScale(d[0][0]) + (xScale(d[0][1]) - xScale(d[0][0])) / 2; })
  .attr("y", function(d) { return yScale(d.data.category) + yScale.bandwidth() / 2; })
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle")
  .text(function(d) { return d[0][1] - d[0][0]; })
  .attr("fill", "white");

// 添加过渡效果
rects.transition()
  .duration(1000)
  .attr("width", function(d) { return xScale(d[1][1]) - xScale(d[1][0]); });

texts.transition()
  .duration(1000)
  .attr("x", function(d) { return xScale(d[1][0]) + (xScale(d[1][1]) - xScale(d[1][0])) / 2; })
  .text(function(d) { return d[1][1] - d[1][0]; });