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 使它变得几乎微不足道。但是，当您想要使用诸如“尝试最小化交叉边的数量”、“将子节点显示在其父节点下方”等规则来组织节点的显示时，事情会变得复杂，这些规则都需要复杂的数学。

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