php如何生成树结构图

PHP如何生成树结构图：从数据到可视化树的完整指南

在Web开发中,树形结构是一种常见的数据组织形式（如分类目录、组织架构、评论回复等），而将树形数据直观地展示为“树结构图”能极大提升用户体验，本文将详细介绍如何使用PHP从原始数据生成树结构图，涵盖数据整理、递归/迭代构建树逻辑，以及前端可视化实现的全流程。

准备工作：理解树形数据与可视化需求

什么是树形结构？

树形结构是由节点和边组成的有向无环图,每个节点可能有零个或多个子节点，且只有一个根节点（无父节点）。

分类目录：根目录 > 电子产品 > 手机 > 智能手机
组织架构：CEO > 技术总监 > 前端组长 > 开发工程师

树结构图的可视化形式

常见的树结构图包括：

层级缩进树：用缩进或连接线表示层级关系（如文件目录树）。
图形化树：用节点和连线绘制成图形（如组织架构图、思维导图）。
折叠/展开树：支持点击节点展开/收起子节点的交互式树。

本文将结合层级缩进树（后端生成）和图形化树（前端可视化）两种形式展开。

第一步：整理原始数据为“适合树形展示”的结构

原始数据通常是扁平的数组（如从数据库查询的记录），需要先转换为“父子关联”的树形结构，假设我们有如下分类数据（数据库表结构：id, name, parent_id）：

// 原始扁平数据
$flatData = [
    ['id' => 1, 'name' => '电子产品', 'parent_id' => 0],
    ['id' => 2, 'name' => '手机', 'parent_id' => 1],
    ['id' => 3, 'name' => '智能手机', 'parent_id' => 2],
    ['id' => 4, 'name' => '功能机', 'parent_id' => 2],
    ['id' => 5, 'name' => '电脑', 'parent_id' => 1],
    ['id' => 6, 'name' => '笔记本', 'parent_id' => 5],
    ['id' => 7, 'name' => '台式机', 'parent_id' => 5],
    ['id' => 8, 'name' => '服装', 'parent_id' => 0],
    ['id' => 9, 'name' => '男装', 'parent_id' => 8],
    ['id' => 10, 'name' => '女装', 'parent_id' => 8],
];

核心目标：将`flatData`转换为`treeData`，每个节点包含`children`子节点数组。

第二步：用PHP构建树形结构

方法1：递归构建（直观，适合小数据量）

递归的核心逻辑是：遍历所有节点，将parent_id等于当前节点id的节点作为其子节点。

function buildTreeRecursive(array $data, int $parentId = 0): array
{
    $tree = [];
    foreach ($data as $item) {
        if ($item['parent_id'] == $parentId) {
            $children = buildTreeRecursive($data, $item['id']);
            if ($children) {
                $item['children'] = $children;
            }
            $tree[] = $item;
        }
    }
    return $tree;
}
$treeData = buildTreeRecursive($flatData);

输出结果：

[
    ['id' => 1, 'name' => '电子产品', 'parent_id' => 0, 'children' => [
        ['id' => 2, 'name' => '手机', 'parent_id' => 1, 'children' => [
            ['id' => 3, 'name' => '智能手机', 'parent_id' => 2],
            ['id' => 4, 'name' => '功能机', 'parent_id' => 2]
        ]],
        ['id' => 5, 'name' => '电脑', 'parent_id' => 1, 'children' => [
            ['id' => 6, 'name' => '笔记本', 'parent_id' => 5],
            ['id' => 7, 'name' => '台式机', 'parent_id' => 5]
        ]]
    ]],
    ['id' => 8, 'name' => '服装', 'parent_id' => 0, 'children' => [
        ['id' => 9, 'name' => '男装', 'parent_id' => 8],
        ['id' => 10, 'name' => '女装', 'parent_id' => 8]
    ]]
]

方法2：迭代构建（高效，适合大数据量）

递归在层级很深时可能导致栈溢出,迭代通过“引用”优化性能，适合处理万级以上数据。

function buildTreeIterative(array $data): array
{
    $tree = [];
    $refer = [];
    // 第一步：建立id到节点的引用
    foreach ($data as $item) {
        $refer[$item['id']] = $item;
    }
    // 第二步：构建树结构
    foreach ($data as $item) {
        $parentId = $item['parent_id'];
        if ($parentId == 0) {
            $tree[] = &$refer[$item['id']];
        } else {
            if (isset($refer[$parentId])) {
                $refer[$parentId]['children'][] = &$refer[$item['id']];
            }
        }
    }
    return $tree;
}
$treeData = buildTreeIterative($flatData);

迭代方法避免了重复遍历,性能更优，适合复杂场景。

第三步：生成“层级缩进树”文本（后端简单可视化）

如果只需要文本形式的树（如命令行输出或简单HTML展示），可以遍历树形数据，通过缩进或符号表示层级：

function printTree(array $tree, string $prefix = ''): void
{
    foreach ($tree as $index => $node) {
        $isLast = $index === count($tree) - 1;
        $currentPrefix = $prefix . ($isLast ? '└── ' : '├── ');
        echo $currentPrefix . $node['name'] . PHP_EOL;
        if (!empty($node['children'])) {
            $childPrefix = $prefix . ($isLast ? '    ' : '│   ');
            printTree($node['children'], $childPrefix);
        }
    }
}
// 输出层级缩进树
printTree($treeData);

输出效果：

├── 电子产品
│   ├── 手机
│   │   ├── 智能手机
│   │   └── 功能机
│   └── 电脑
│       ├── 笔记本
│       └── 台式机
└── 服装
    ├── 男装
    └── 女装

生成HTML缩进树

结合HTML和CSS,可以生成更美观的缩进树：

function renderHtmlTree(array $tree, int $level = 0): string
{
    $html = '';
    foreach ($tree as $node) {
        $indent = str_repeat('&nbsp;&nbsp;&nbsp;&nbsp;', $level);
        $html .= "<div style='margin-left: " . ($level * 20) . "px;'>";
        $html .= $indent . '• ' . htmlspecialchars($node['name']) . "</div>";
        if (!empty($node['children'])) {
            $html .= renderHtmlTree($node['children'], $level + 1);
        }
    }
    return $html;
}
// 在PHP模板中输出
echo "<div class='tree'>" . renderHtmlTree($treeData) . "</div>;

CSS样式（可选）：

.tree {
    font-family: Arial, sans-serif;
    line-height: 1.6;
}
.tree div {
    margin: 2px 0;
}

第四步：生成“图形化树”（前端可视化实现）

图形化树（如D3.js、ECharts等）需要后端提供JSON格式的树形数据，前端通过库渲染，以下是完整流程：

后端输出JSON树形数据

PHP将树形数据转换为JSON,供前端调用：

header('Content-Type: application/json');
echo json_encode($treeData, JSON_UNESCAPED_UNICODE);

前端使用D3.js渲染图形化树

D3.js是强大的数据可视化库，适合绘制交互式树图。

步骤1：引入D3.js

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

wps下载 wps官网 wps

WhatsApp 網頁版

WhatsApp web

谷歌浏览器

谷歌浏览器

正文

php如何生成树结构图