如何使用d3.js将外部组添加到已有的svg？

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

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

d3.json("data.json").then(function(data) {
  // 在这里处理加载的数据
});

const svg = d3.select("svg");

const groups = svg.selectAll("g")
  .data(data) // 使用加载的数据绑定组元素
  .enter()
  .append("g");

groups.append("rect")
  .attr("x", function(d) { return d.x; }) // 根据数据设置矩形的x坐标
  .attr("y", function(d) { return d.y; }) // 根据数据设置矩形的y坐标
  .attr("width", function(d) { return d.width; }) // 根据数据设置矩形的宽度
  .attr("height", function(d) { return d.height; }) // 根据数据设置矩形的高度
  .attr("fill", function(d) { return d.color; }); // 根据数据设置矩形的颜色