如何在D3中对齐文本和标签

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

// 数据
const data = [10, 20, 30, 40, 50];

// 创建条形图
const bars = svg.selectAll("rect")
    .data(data)
    .enter().append("rect")
    .attr("x", (d, i) => i * 70)
    .attr("y", (d) => 300 - d * 5)
    .attr("width", 65)
    .attr("height", (d) => d * 5)
    .attr("fill", "steelblue");

// 添加文本标签并水平对齐
const labels = svg.selectAll("text")
    .data(data)
    .enter().append("text")
    .attr("x", (d, i) => i * 70 + 32) // 水平居中对齐
    .attr("y", (d) => 300 - d * 5 - 5)
    .text((d) => d)
    .attr("text-anchor", "middle"); // 设置文本水平居中