如何使用D3js绘制像墙砖结构一样放置的矩形？

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

const svg = d3.select("body")
  .append("svg")
  .attr("width", width)
  .attr("height", height);

const rectData = [
  { x: 0, y: 0, width: 50, height: 50 },
  { x: 60, y: 0, width: 50, height: 50 },
  // 其他矩形的位置和大小信息
];

const rects = svg.selectAll("rect")
  .data(rectData)
  .enter()
  .append("rect")
  .attr("x", d => d.x)
  .attr("y", d => d.y)
  .attr("width", d => d.width)
  .attr("height", d => d.height)
  .attr("fill", "steelblue");

rects.on("mouseover", function() {
  d3.select(this).attr("fill", "orange");
})
.on("mouseout", function() {
  d3.select(this).attr("fill", "steelblue");
});