如何使用PHP和Javascript生成基于级别的组织结构图？

<?php
// 连接数据库
$servername = "localhost";
$username = "username";
$password = "password";
$dbname = "database";

$conn = new mysqli($servername, $username, $password, $dbname);

// 检查连接是否成功
if ($conn->connect_error) {
    die("连接失败: " . $conn->connect_error);
}

// 从数据库中获取组织结构数据
$sql = "SELECT id, name, parent_id FROM organization";
$result = $conn->query($sql);

// 将数据转换为树形结构
$tree = array();
while ($row = $result->fetch_assoc()) {
    $id = $row['id'];
    $name = $row['name'];
    $parent_id = $row['parent_id'];

    $tree[$id] = array(
        'id' => $id,
        'name' => $name,
        'parent_id' => $parent_id,
        'children' => array()
    );

    if (!isset($tree[$parent_id])) {
        $tree[$parent_id] = array(
            'id' => $parent_id,
            'name' => '',
            'parent_id' => null,
            'children' => array()
        );
    }

    $tree[$parent_id]['children'][] = &$tree[$id];
}

// 关闭数据库连接
$conn->close();

// 将树形结构数据转换为JSON格式
$json_data = json_encode($tree[null]['children']);

// 输出JSON数据
echo $json_data;
?>

// 获取组织结构数据
var jsonData = <?php echo $json_data; ?>;

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

// 创建组织结构图布局
var layout = d3.tree()
               .size([400, 400]);

// 将数据转换为层次结构数据
var root = d3.hierarchy(jsonData[0]);

// 生成组织结构图
var nodes = layout(root).descendants();
var links = layout(root).links();

// 绘制节点
var node = svg.selectAll(".node")
              .data(nodes)
              .enter()
              .append("g")
              .attr("class", "node")
              .attr("transform", function(d) {
                  return "translate(" + d.y + "," + d.x + ")";
              });

node.append("circle")
    .attr("r", 5);

node.append("text")
    .attr("x", function(d) {
        return d.children ? -10 : 10;
    })
    .attr("dy", 5)
    .style("text-anchor", function(d) {
        return d.children ? "end" : "start";
    })
    .text(function(d) {
        return d.data.name;
    });

// 绘制连线
svg.selectAll(".link")
   .data(links)
   .enter()
   .append("path")
   .attr("class", "link")
   .attr("d", function(d) {
       return "M" + d.source.y + "," + d.source.x
            + "C" + (d.source.y + d.target.y) / 2 + "," + d.source.x
            + " " + (d.source.y + d.target.y) / 2 + "," + d.target.x
            + " " + d.target.y + "," + d.target.x;
   });