HTML/CSS可視化RBAC圖形

我有一個RBAC結構存儲在我的數據庫（用Yii構建的項目）。HTML/CSS可視化RBAC圖形

我很想生成一個圖形，以便可視化項目之間的關係，以查看我是否犯了邏輯錯誤，並向其他團隊成員展示。

我在想創建一個能生成圖形/樹的頁面。我想我可以處理服務器端部分，但我不知道如何生成HTML/CSS（或圖像）。

圖中的節點可以有多個子節點和多個父節點。箭頭是指示。例如： example

我不介意使用最新的CSS3和HTML5技術，因爲它只會被選定的人使用。

來源

2012-12-30 Nathan H

你可以試用梨包嗎？ –

你也可以使用http://sigmajs.org/庫 – 2013-01-09 06:28:08

不久前我遇到了類似的問題。我終於帶來的解決方案是一個完美的技巧，即德古拉的js庫。

這裏是圖書館的鏈接：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使得近微不足道。但是當你想用諸如「儘量減少交叉邊緣數量」，「在父母下面展示孩子」等規則來組織節點的顯示時，情況會變得複雜，這些都需要複雜的數學。

我不認爲德古拉允許自定義那種規則。儘管如此，考慮到你的評論，我認爲可能有一個不太複雜的方式來使佈局看起來像垂直樹，因爲它是一個非循環圖（至少，它似乎是）。但是，你將不得不爲此製作自己的圖書館。

來源

2013-01-02 09:29:02 dader

我一直在玩這個，很好。文檔不存在，因此很難理解。我設法創造了一些體面的東西。困難的部分是使佈局看起來像類似於示例的垂直樹。 –

怎麼樣使用SVG？ SVG可以通過CSS進行樣式化，可以通過Javascript訪問並嵌入到HTML文檔中。使用矢量格式似乎對Graph可視化來說是足夠的，因爲它具有許多優點。只有一個優點 - 特別是在Web環境中 - 與位圖圖像相比，大圖的文件較小。

對於圖表可視化本身，請注意Graphviz。它是自1988年以來一直積極開發的圖形渲染軟件/庫。它能夠渲染各種類型的圖形並將結果圖像導出爲各種圖像格式，包括SVG。它使用所謂的「點語言」來描述圖形。查看Graphviz project page以查找許多關於點語言的示例和文檔。

您是否在命令行上嘗試過使用dot？ dot是Graphviz包中的一個二進制文件，它讀取用點語言編寫的文件並將其呈現爲所需的圖像格式。這是一個很好的實驗起點。

我曾經用它動態地繪製PHP類圖。我已經生成PHP中的.DOT文件，並把它翻譯使用exec dot -Tsvg graph.dot

還有名爲Image_Graphviz的PEAR庫是在類似的項目，您使用的PHP包裝庫的GraphViz爲SVG。

當然，如果您使用通用圖形繪圖庫進行手動繪圖比較，則必須進行一些佈局折衷。但是當熟悉點語言時，你會獲得最好的結果。

來源

2013-01-08 08:35:01 hek2mgl

只是下面的示例，

圖表是最常用的數據結構之一，鏈表和樹一起。在最近的一個PHP項目中，我需要構建一個Graph結構來分析一些相互關聯的URL。這個問題很簡單，所以不用編寫我自己的代碼，而是使用Pear存儲庫中提供的代碼。

Pear Structures_Graph包允許創建和操作圖形數據結構。它允許構建定向或無向圖，數據和元數據存儲在節點中。該庫提供圖遍歷以及圖拓撲的特徵提取功能。

也可參考以下位置：http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

一些示例代碼：

<?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]]); 
} 
?>

來源

2013-01-08 12:44:45

如果我理解正確，你解釋了構建圖STRUCTURE的一種方法，而我真的正在尋找一種方法將其顯示給用戶... –

你確定你可以做到這一點......如果你瞭解'Structures_Graph' 。 –

如果你能在服務器端使用Python，你可以使用Networkx產生高品質的圖形和保存他們像SVG，PNG或任何你喜歡的。

來源

2013-01-09 07:29:29

HTML/CSS可視化RBAC圖形

回答

相關問題