如何在D3.js SVG网格矩形上居中显示文本？

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

// 创建网格矩形
var data = [1, 2, 3, 4, 5];
var rect = svg.selectAll("rect")
  .data(data)
  .enter()
  .append("rect")
  .attr("x", function(d, i) { return i * 100; })
  .attr("y", 0)
  .attr("width", 100)
  .attr("height", 100)
  .attr("fill", "steelblue");

// 居中显示文本
var text = svg.selectAll("text")
  .data(data)
  .enter()
  .append("text")
  .text(function(d) { return "Text " + d; })
  .attr("x", function(d, i) { return i * 100 + 50; })
  .attr("y", 50)
  .attr("text-anchor", "middle")
  .attr("alignment-baseline", "middle")
  .attr("fill", "white");