HTML/CSS Visualizzazione di un grafico RBAC

Question

Ho una struttura RBAC memorizzata nel mio database (un progetto creato con Yii).

Mi piacerebbe generare un grafico per visualizzare le relazioni tra gli elementi per vedere se non sto facendo errori logici e per mostrare agli altri membri del team.

Stavo pensando di creare una pagina che generi un grafico/albero. Penso di poter gestire la parte lato server ma non ho idea di come generare HTML/CSS (o immagine).

I nodi nel grafico possono avere più figli e più genitori. Le frecce sono dirette. Esempio:

Non mi interessa usare le ultime tecnologie CSS3 e HTML5 poiché verrà utilizzato solo da persone selezionate.

Answer 1

Mi sono imbattuto in preoccupazioni simili qualche tempo fa. La soluzione con cui finalmente sono arrivato è una piccola libreria js che ha fatto perfettamente il trucco, ovvero Dracula.

Questo è il link alla libreria: https://github.com/strathausen/dracula

Considerando le vostre esigenze, tutto quello che dovrete fare è qualcosa di simile:

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(); 

Per maggiori informazioni, vi svelo lotta con la documentazione.

Spero che aiuti.

[ADDENDUM]

Vorrei aggiungere che, in generale, la questione di visualizzare i nodi e le frecce non è un grosso problema, usando svg rende vicino banale. Ma le cose si complicano quando si vuole organizzare la visualizzazione dei nodi con regole come "cercare di minimizzare il numero di fronti di attraversamento", "mostrare i bambini sotto il loro genitore", ecc. Che richiedono tutti una matematica complessa.

Non penso che Dracula consenta di personalizzare questo tipo di regole. Tuttavia, considerando il tuo commento, penso che ci possa essere un modo non troppo complicato per rendere il layout simile a un albero verticale, poiché è un grafo aciclico (almeno sembra essere). Ma poi dovrai passare attraverso la creazione della tua biblioteca per questo.

Answer 2

Informazioni sull'uso di SVG? SVG può essere disegnato da CSS, accessibile tramite Javascript e incorporato nei documenti HTML. E l'utilizzo di un formato vettoriale sembra essere adeguato per la visualizzazione di grafici in quanto presenta numerosi vantaggi. Un solo vantaggio, specialmente nell'ambiente Web, è la dimensione del file più piccola di grandi grafici rispetto alle immagini bitmap.

Per la visualizzazione grafica in sé, viene in mente Graphviz. È un software di rendering grafico/libreria che è stato attivamente sviluppato dal 1988. È in grado di visualizzare vari tipi di grafici ed esportare l'immagine risultante in vari formati di immagine, tra cui SVG. Usa il cosiddetto 'linguaggio dei punti' per descrivere i grafici. Dai un'occhiata al Graphviz project page per trovare molti esempi e documentazione sul linguaggio dei punti.

Avete già sperimentato con dot sulla riga di comando? dot è un file binario del pacchetto Graphviz che legge i file scritti nel linguaggio dei punti e li rende nel formato immagine desiderato. È un buon punto di partenza per esperimenti.

L'ho usato una volta per disegnare diagrammi di classe PHP in modo dinamico. Ho generato un file .dot in php e lo ho tradotto in SVG usando exec dot -Tsvg graph.dot

C'è anche una libreria wrapper PHP per GraphViz negli archivi PEAR chiamati Image_Graphviz che viene utilizzato in progetti simili come il tuo.

Ovviamente dovrete eseguire alcuni compromessi di layout se lavorate con una libreria di disegno di grafici generici confrontandola con il disegno manuale. Ma quando si acquisisce familiarità con il linguaggio dei punti otterrete i migliori risultati.

Answer 3

Basta provare con il seguente.,

grafici sono una delle strutture dati più frequentemente utilizzati, insieme a liste concatenate e alberi. In un recente progetto PHP avevo bisogno di costruire una struttura Graph per analizzare alcuni URL interconnessi. Il problema era di natura semplice, quindi piuttosto che scrivere il mio codice, sono andato con quello disponibile nel repository Pear.

Il pacchetto Pear Structures_Graph consente di creare e manipolare strutture di dati del grafico. Consente la creazione di grafici diretti o non orientati, con dati e metadati memorizzati nei nodi. La libreria fornisce funzioni per il tracciamento del grafico e per l'estrazione caratteristica dalla topologia del grafico.

riferiscono anche nel seguente percorso: http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Alcuni codici di esempio:

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

Answer 4

Se è possibile utilizzare Python sul lato server, è possibile utilizzare Networkx per generare grafica di alta qualità e risparmiare li come SVG, PNG o qualsiasi altra cosa ti piaccia.