如何让文本在饼图的每个切片中居中？

// 假设已经有一个包含饼图数据的数组 data

// 创建一个 SVG 元素作为容器
var svg = d3.select("body")
  .append("svg")
  .attr("width", 500)
  .attr("height", 500);

// 创建一个饼图布局
var pie = d3.pie()
  .value(function(d) { return d.value; });

// 根据数据生成饼图的路径数据
var pathData = pie(data);

// 创建一个弧生成器
var arc = d3.arc()
  .innerRadius(0)
  .outerRadius(200);

// 在 SVG 中绘制饼图
var slices = svg.selectAll("path")
  .data(pathData)
  .enter()
  .append("path")
  .attr("d", arc)
  .attr("fill", function(d) { return d.data.color; });

// 在每个切片中添加文本
var labels = svg.selectAll("text")
  .data(pathData)
  .enter()
  .append("text")
  .attr("transform", function(d) {
    // 计算切片中心坐标
    var centroid = arc.centroid(d);
    // 根据切片的角度范围进行偏移
    var angle = (d.startAngle + d.endAngle) / 2;
    var x = centroid[0] + Math.cos(angle) * 100; // 水平偏移
    var y = centroid[1] + Math.sin(angle) * 100; // 垂直偏移
    return "translate(" + x + "," + y + ")";
  })
  .attr("text-anchor", "middle")
  .text(function(d) { return d.data.label; });