php如何生成树结构图

PHP如何生成树结构图：从递归到可视化展示

在开发Web应用时，树形结构是一种常见的数据组织形式，如分类目录、组织架构、评论回复链等，将树形数据以直观的“树结构图”展示出来，能极大提升用户体验，本文将详细介绍如何使用PHP生成树结构图，从数据预处理到可视化渲染，涵盖递归构建、前端渲染等核心步骤。

理解树形数据与结构图的核心需求

什么是树形结构？

树形结构是由节点和边组成的有向无环图,具有层级关系。

分类目录：根节点 → 电子产品 → 手机 → 智能手机
组织架构：CEO → 技术总监 → 前端组长

树结构图的核心目标

将层级数据转化为可视化图形,通常需满足：

清晰展示父子关系
节点布局合理（避免重叠）
支持展开/折叠（可选）
适配不同数据规模（从几十到上千节点）

准备阶段：树形数据的存储与获取

生成树结构图的前提是获取或构建树形数据,常见的数据存储方式有两种：

关系型数据库（如MySQL）

通过“父子ID”关联存储，

CREATE TABLE `categories` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `name` varchar(50) NOT NULL,
  `parent_id` int(11) DEFAULT '0',
  PRIMARY KEY (`id`)
);

数据示例： | id | name | parent_id | |----|------------|-----------| | 1 | 电子产品 | 0 | | 2 | 手机 | 1 | | 3 | 电脑 | 1 | | 4 | 智能手机 | 2 | | 5 | 笔记本电脑 | 3 |

PHP数据预处理：扁平数据转树形

从数据库获取的是扁平数组（如[1,2,3,4,5]），需转换为树形结构，核心思路是通过parent_id递归查找子节点。

代码实现：递归构建树

/**
 * 扁平数据转树形结构
 * @param array $data 扁平数据
 * @param int $parent_id 父节点ID
 * @param string $id 主键字段名
 * @param string $pid 父ID字段名
 * @return array 树形结构
 */
function buildTree(array $data, int $parent_id = 0, string $id = 'id', string $pid = 'parent_id'): array
{
    $tree = [];
    foreach ($data as $item) {
        if ($item[$pid] == $parent_id) {
            $children = buildTree($data, $item[$id], $id, $pid);
            if ($children) {
                $item['children'] = $children;
            }
            $tree[] = $item;
        }
    }
    return $tree;
}
// 示例：从数据库获取数据并转树
$data = [
    ['id' => 1, 'name' => '电子产品', 'parent_id' => 0],
    ['id' => 2, 'name' => '手机', 'parent_id' => 1],
    ['id' => 3, 'name' => '电脑', 'parent_id' => 1],
    ['id' => 4, 'name' => '智能手机', 'parent_id' => 2],
    ['id' => 5, 'name' => '笔记本电脑', 'parent_id' => 3],
];
$tree = buildTree($data);
// 输出树形结构（用于调试）
echo '<pre>';
print_r($tree);
echo '</pre>';

输出结果：

Array
(
    [0] => Array
        (
            [id] => 1
            [name] => 电子产品
            [parent_id] => 0
            [children] => Array
                (
                    [0] => Array
                        (
                            [id] => 2
                            [name] => 手机
                            [parent_id] => 1
                            [children] => Array
                                (
                                    [0] => Array
                                        (
                                            [id] => 4
                                            [name] => 智能手机
                                            [parent_id] => 2
                                        )
                                )
                        )
                    [1] => Array
                        (
                            [id] => 3
                            [name] => 电脑
                            [parent_id] => 1
                            [children] => Array
                                (
                                    [0] => Array
                                        (
                                            [id] => 5
                                            [name] => 笔记本电脑
                                            [parent_id] => 3
                                        )
                                )
                        )
                )
        )
)

核心步骤：生成树结构图的两种方案

生成树结构图主要有两种技术路径：前端渲染（推荐）和后端生成图片，前者更灵活,后者适合无需交互的场景。

前端渲染（推荐）

使用JavaScript库（如D3.js、ECharts、jsTree）将PHP传递的树形数据渲染为图形。优势：交互性强（展开/折叠、点击事件）、样式可定制、无需服务器额外计算。

步骤1：传递数据给前端

PHP将树形数据转为JSON,通过模板引擎或API传递给前端：

<?php
// 假设已通过buildTree()获取$tree
$jsonData = json_encode($tree, JSON_UNESCAPED_UNICODE);
?>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">树结构图示例</title>
    <!-- 引入ECharts -->
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body>
    <div id="treeChart" style="width: 800px; height: 600px;"></div>
    <script>
        // 接收PHP传递的树形数据
        const treeData = <?php echo $jsonData; ?>;
        // 初始化ECharts实例
        const chartDom = document.getElementById('treeChart');
        const myChart = echarts.init(chartDom);
        // 配置项
        const option = {
            tooltip: {
                trigger: 'item',
                triggerOn: 'mousemove'
            },
            series: [
                {
                    type: 'tree',
                    data: [treeData],
                    top: '1%',
                    left: '7%',
                    bottom: '1%',
                    right: '20%',
                    symbolSize: 7,
                    label: {
                        position: 'left',
                        verticalAlign: 'middle',
                        align: 'right',
                        fontSize: 14
                    },
                    leaves: {
                        label: {
                            position: 'right',
                            verticalAlign: 'middle',
                            align: 'left'
                        }
                    },
                    emphasis: {
                        focus: 'descendant'
                    },
                    expandAndCollapse: true, // 开启展开/折叠
                    animationDuration: 550,
                    animationDurationUpdate: 750
                }
            ]
        };
        // 渲染图表
        myChart.setOption(option);
        // 响应式调整
        window.addEventListener('resize', () => {
            myChart.resize();
        });
    </script>
</body>
</html>

效果展示：

树形从左到右展开，根节点在左侧,叶子节点在右侧。
鼠标悬停显示节点详情。
支持点击节点展开/折叠子树。

方案2：使用D3.js（更灵活的定制）

D3.js是数据可视化领域的“瑞士军刀”，适合高度定制化的树形图（如径向树、集群图）。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">D3.js树结构图</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <style>
        .node circle {
            fill: #fff;
            stroke: steelblue;
            stroke-width: 3px;
        }
        .node text {
            font: 12px sans-serif;
        }
        .link {
            fill: none;
            stroke: #ccc;
            stroke-width: 2px;
        }
    </style>
</head>
<body>
    <svg id="d3Tree" width="800" height="600"></svg>
    <script>
        const treeData = <?php echo $jsonData; ?>;
        const svg = d3.select("#d3Tree");
        const width = 800, height = 600;
        const g = svg.append("g").attr("transform", "translate(50,50)");
        const tree = d3.tree().size([height - 100, width - 200]);
        const root = d3.hierarchy(treeData);