如何在d3.js中创建形状正确的矩形树状图？

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

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

// 准备数据
const data = {
  "name": "Root",
  "children": [
    {
      "name": "Node 1",
      "children": [
        {"name": "Leaf 1"},
        {"name": "Leaf 2"}
      ]
    },
    {
      "name": "Node 2",
      "children": [
        {"name": "Leaf 3"},
        {"name": "Leaf 4"}
      ]
    }
  ]
};

// 创建树状图布局
const treeLayout = d3.tree()
  .size([600, 400]);

// 创建节点和连线的数据结构
const root = d3.hierarchy(data);
const links = treeLayout(root).links();
const nodes = root.descendants();

// 创建连线的生成器
const linkGenerator = d3.linkHorizontal()
  .x(d => d.y)
  .y(d => d.x);

// 绘制连线
svg.selectAll(".link")
  .data(links)
  .enter()
  .append("path")
  .attr("class", "link")
  .attr("d", linkGenerator);

// 绘制节点
const node = svg.selectAll(".node")
  .data(nodes)
  .enter()
  .append("g")
  .attr("class", "node")
  .attr("transform", d => `translate(${d.y},${d.x})`);

node.append("rect")
  .attr("width", 80)
  .attr("height", 40)
  .attr("x", -40)
  .attr("y", -20);

node.append("text")
  .text(d => d.data.name)
  .attr("text-anchor", "middle")
  .attr("dominant-baseline", "middle");

// 添加交互效果
node.on("mouseover", function() {
  d3.select(this).select("rect").style("fill", "lightblue");
})
.on("mouseout", function() {
  d3.select(this).select("rect").style("fill", "white");
});