如何在热图上添加文本，以便在使用D3.js时正确显示每个矩形的值？

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

// 创建颜色比例尺
var colorScale = d3.scaleLinear()
  .domain([0, maxValue])
  .range(["#ffffff", "#ff0000"]);

// 创建矩形比例尺
var rectScale = d3.scaleBand()
  .domain(data.map(function(d) { return d.x; }))
  .range([0, width]);

// 绘制热图
svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d) { return rectScale(d.x); })
  .attr("y", function(d) { return rectScale(d.y); })
  .attr("width", rectScale.bandwidth())
  .attr("height", rectScale.bandwidth())
  .attr("fill", function(d) { return colorScale(d.value); });

// 添加文本
svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .text(function(d) { return d.value; })
  .attr("x", function(d) { return rectScale(d.x) + rectScale.bandwidth() / 2; })
  .attr("y", function(d) { return rectScale(d.y) + rectScale.bandwidth() / 2; })
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "middle")
  .attr("fill", "black");