php - HTML/CSS 可视化 RBAC 图

Question

我的数据库中存储了一个 RBAC 结构(一个使用 Yii 构建的项目)。

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

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

图中的节点可以有多个子节点和多个父节点。箭头是有方向的。示例:

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

Answer 1

我刚才遇到了类似的问题。我最终想到的解决方案是一个可以完美解决问题的小型 js 库，即 Dracula。

这里是图书馆的链接:https://github.com/strathausen/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 使它变得近乎微不足道。但是当你想用诸如“尽量减少交叉边的数量”、“在父节点下方显示子节点”等规则来组织节点的显示时，事情就变得复杂了，这些都需要复杂的数学运算。

我不认为 Dracula 允许人们自定义那种规则。尽管如此，考虑到您的评论，我认为可能有一种不太复杂的方法可以使布局看起来像垂直树，因为它是一个非循环图(至少看起来是)。但是你必须为此制作你自己的图书馆。