如何在条形图中将标签与数据一起写入每个堆栈的顶部和底部

// 引入D3.js库
<script src="https://d3js.org/d3.v7.min.js"></script>

// 创建条形图容器
<div id="chart"></div>

// 准备数据
var data = [
  { label: "A", value: 10 },
  { label: "B", value: 20 },
  { label: "C", value: 15 }
];

// 设置图表大小和颜色
var width = 400;
var height = 300;
var barColor = "steelblue";

// 创建条形图
var svg = d3.select("#chart")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

var bars = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", 0)
  .attr("y", function(d, i) { return i * 30; })
  .attr("width", function(d) { return d.value; })
  .attr("height", 20)
  .attr("fill", barColor);

// 添加标签和数据
var labels = svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .attr("x", function(d) { return d.value + 5; })
  .attr("y", function(d, i) { return i * 30 + 15; })
  .text(function(d) { return d.label + ": " + d.value; })
  .attr("fill", "black");