我的数据库中存储了一个RBAC结构(一个使用Yii构建的项目)。
我希望生成一个图表以可视化项目之间的关系，以查看我是否没有犯逻辑错误，并向其他团队成员展示。
我正在考虑创建一个将生成图形/树的页面。我认为我可以处理服务器端部分，但是我不知道如何生成HTML/CSS(或图像)。
图中的节点可以有多个子代和多个父代。箭头指向。例子:
我不介意使用最新的CSS3和HTML5技术，因为它将仅由选定的人使用。
最佳答案
不久前，我也遇到了类似的问题。我最终提供的解决方案是一个完美完成此功能的小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)不允许自定义此类规则。不过，考虑到您的评论，我认为可能有一种不太复杂的方法来使布局看起来像垂直树，因为它是一个非循环图(至少看起来是)。但是，随后您将必须为此创建自己的库。