README

有时我们需要方便地表示如文件系统之类的层次数据结构。其中一种著名的方法是树形图。这个 PHP 包 允许您从原生 PHP 多维数组中构建 html、canvas 和图像格式的树形图。特殊的类架构使您有机会在单个节点级别进行自定义：节点内容、节点颜色等。

查看 演示。

有关树形图的更多信息，您可以在 wiki 中查看。

安装

使用 composer 安装最新版本

composer require codeagent\treemap

此外，还需要将所需的 CSS 样式插件到您的页面中，以正确显示 html 标记。您可以通过将 treemap.css 文件复制到服务器可访问的文件夹中来实现。要这样做，只需运行带有目标目录作为参数的 vendor/bin/treemap 命令。然后您需要通过 <link> 标签将其包含在页面的 head 部分中，例如 <link rel="stylesheet" href="assets/treemap.css" />

基本用法

包含 composer 的自动加载器，并将 Treemap 类从 codeagent\treemap 命名空间注入到 PHP 脚本中。将数据作为第一个参数、宽度和高度作为第二和第三个参数传入。要获取渲染结果（html 标记、图像），请调用 Presenter 接口的 render 方法

include("vendor/autoload.php");
use codeagent\treemap\Treemap;

// your data in consistent format
$data = [["value" => 2, "children" => [...]], ["value" => "4", "children" => [...]], [...], ...]; 
$presenter = Treemap::html($data, 1200, 800);
echo $presenter->render();

默认情况下，Treemap 类认为“权重”非负值位于 value 属性中，而“子节点”通过节点的对应 children 键访问。如果这不适合您，您可以明确告诉树形图要选择哪些键

$treemap = new Treemap($data, 1200, 800);
$treemap->valueAttribute = "volume";
$treemap->childrenAttribute = "department";

然后使用适当的 Presenter 绘制树形图

$presenter = new HtmlPresenter($treemap);
echo $presenter->render();

别忘了通过 use 语句将 presenter 类注入到您的脚本中。

高级用法

表示格式

当然，树形图的表现形式不仅限于 html。除了 html 之外，此包中还有用于构建图像和 canvas 元素的类。

include("vendor/autoload.php");
use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\presenter\NestedHtmlPresenter;
use codeagent\treemap\presenter\CanvasPresenter;
use codeagent\treemap\presenter\ImagePresenter;

$data = [...]; // your hierarhical data
const WIDTH = 1200;
const HEIGHT = 800;
$treemap = new Treemap($data, WIDTH, HEIGHT);

$html = (new HtmlPresenter($treemap))->render(); 
// same as  $html = Treemap::html($data, WIDTH, HEIGHT)->render();
echo $html;

$canvas = (new CanvasPresenter($treemap))->render(); 
// same as  $canvas = Treemap::canvas($data, WIDTH, HEIGHT)->render();
echo $canvas;

$image = (new ImagePresenter($treemap, "png"))->render();
// same as $image = Treemap::image($data, WIDTH, HEIGHT, "png")->render();

header("Content-Type: image/png");
echo $image;

ImagePresenter 以原始数据的形式输出图像。因此，传递包含图像数据的适当内容类型标题：header("Content-Type: image/png")。值得注意的是 NestedtmlPresenter。实际上，它是一组具有不同细节程度的树形图，这使得您可以通过标题和 presenter 顶部的面包屑轻松地从一张图导航到另一张图。

自定义节点样式

Presenter 接口通过一个实用程序 Nodeinfo 类提供了调整单个节点渲染的能力，例如

use codeagent\treemap\Treemap;
use codeagent\treemap\presenter\HtmlPresenter;
use codeagent\treemap\presenter\NodeInfo;

$presenter = Treemap::html($data, $width, $height)
    ->render(function(NodeIndo $node){
        $data = $node->data();	
        $node->content()->html("<span>{$data['name']}</span>");
        $node->background("calculated_color_here");
    });

NodeInfo API 提供了对节点信息的访问

• background() - 设置/获取节点的背景颜色
• content() - 访问节点的内容（NodeContent）
• rectangle() - 访问节点的几何形状（矩形）
• level() - 节点的深度（0 是根节点）
• isLeaf() - 节点是否为叶子节点
• isRoot() - 节点是否为根节点
• id() - 节点兄弟之间的顺序
• visible() - 节点是否可见/不可见
• data() - 节点数据

许可证

MIT