Php 可视化RBAC图的HTML/CSS

我的数据库中存储了一个RBAC结构（一个用Yii构建的项目）

我想生成一个图表来可视化项目之间的关系，看看我是否没有犯逻辑错误，并向其他团队成员展示

我正在考虑创建一个可以生成图形/树的页面。我想我可以处理服务器端部分，但我不知道如何生成HTML/CSS（或图像）

图中的节点可以有多个子节点和多个父节点。箭头指向。例如：

---

我不介意使用最新的CSS3和HTML5技术，因为它只会被选定的人使用。

我不久前遇到过类似的问题。我最终得到的解决方案是一个小js库，它完美地完成了这个任务，即Dracula

以下是指向该库的链接：

考虑到您的需求，您需要做的就是：

var g = new Graph();

g.addEdge('author', 'create');
g.addEdge('author', 'reader');
g.addEdge('author', 'admin');

// add here the other edges.

var layouter = new Graph.Layout.Spring();
layouter.layout();

var renderer = new Graph.Renderer.Raphael('#canvas', g, 400, 300);
renderer.draw();

要了解更多信息，我将让您在文档中挣扎

希望能有帮助

[增编]

我想补充一点，一般来说，显示节点和箭头的问题不是什么大问题，使用svg几乎是小事一桩。但是，当您想要使用诸如“尽量减少交叉边的数量”、“在其父节点下方显示子节点”等规则来组织节点的显示时，事情会变得复杂，这些规则都需要复杂的数学

---

我不认为德古拉允许人们定制这种规则。尽管如此，考虑到你的评论，我认为可能有一种不太复杂的方法使布局看起来像垂直树，因为它是一个非循环图（至少看起来是）。但是，您必须完成自己的库的制作。

使用SVG怎么样？SVG可以通过CSS设置样式，通过Javascript访问并嵌入到HTML文档中。使用矢量格式似乎适合图形可视化，因为它有许多优点。只有一个优势——特别是在web环境中——是大型图形的文件大小比位图图像小

对于图形可视化本身，在脑海中浮现。它是自1988年以来积极开发的图形绘制软件/库。它能够呈现各种类型的图形，并将生成的图像导出为各种图像格式，包括SVG。它使用所谓的“点语言”来描述图形。看看Graphviz，可以找到许多关于dot语言的示例和文档

您是否已经在命令行上试用过

dot

dot

是Graphviz包中的二进制文件，它读取用dot语言编写的文件，并将其渲染为所需的图像格式。这是一个很好的实验起点

我曾经用它动态地绘制PHP类图。我用php生成了一个.dot文件，并使用

exec dot-Tsvg graph.dot将其转换为SVG

PEAR存储库中还有一个用于GraphViz的PHP包装器库，名为，用于与您类似的项目中

当然，与手动绘制相比，如果您使用的是通用图形绘制库，则必须做出一些布局折衷。但是，当你熟悉dot语言时，你会获得最好的效果。
只需尝试以下方法。，

图形是最常用的数据结构之一，还有链表和树。在最近的一个PHP项目中，我需要构建一个图形结构来分析一些相互链接的URL。问题的性质很简单，因此我没有编写自己的代码，而是使用Pear存储库中可用的代码

Pear Structures_Graph包允许创建和操作图形数据结构。它允许构建有向图或无向图，数据和元数据存储在节点中。该库提供图形遍历以及从图形拓扑中提取特征的功能

另请参考以下位置：

一些示例代码：

<?php

require_once 'Structures/Graph.php';
require_once 'Structures/Graph/Node.php';

$nonDirectedGraph = new Structures_Graph(false);

$nodes_names = array('a', 'b', 'c' ,'d', 'e');
$nodes = array();

foreach($nodes_names as $node) {
    /* Create a new node / vertex */
    $nodes[$node] = new Structures_Graph_Node();

    /* Add the node to the Graph structure */
    $nonDirectedGraph ->addNode($nodes[$node]);
}

/**
  * Specify connections between different nodes.
  * For example in the following array, 'a-b'
  * specifies that node 'a' is connected to node 'b'.
  * Also refer to the figure above.
  */

$vertices = array('a-b', 'b-c', 'b-d', 'd-c', 'c-e', 'e-d');

foreach($vertices as $vertex) {
    $data = preg_split("/-/",$vertex);
    $nodes[$data[0]]->connectTo($nodes[$data[1]]);
}
?>


如果您可以在服务器端使用Python，您可以使用它生成高质量的图形，并将它们保存为SVG、PNG或任何您喜欢的格式。
我一直在使用它，这很好。文档不存在，因此很难理解。我成功地创造了一些半体面的东西。困难的部分是使布局看起来像与示例类似的垂直树。您可以尝试使用pear包吗？您可以使用library Too如果我理解正确，您解释了构建图形结构的方法，虽然我真的在寻找一种向用户显示它的方法…你肯定可以做到这一点…如果你理解“结构图”。