如何绘制堆叠在一起的多个图形

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

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

// 定义图形数据
const data = [
  { x: 0, y: 0, width: 100, height: 50, color: "red" },
  { x: 50, y: 25, width: 150, height: 75, color: "green" },
  { x: 100, y: 50, width: 200, height: 100, color: "blue" }
];

// 绘制图形
svg.selectAll("rect")
  .data(data)
  .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", d => d.color);