HTML/CSS Wizualizacja wykresu RBAC

Question

Mam strukturę RBAC przechowywaną w mojej bazie danych (projekt zbudowany z Yii).

Chciałbym wygenerować wykres, aby zwizualizować relacje między przedmiotami, aby sprawdzić, czy nie popełniam logicznych błędów i pokazać innym członkom zespołu.

Myślałem, że utworzę stronę, która wygeneruje wykres/drzewo. Myślę, że poradzę sobie z częścią po stronie serwera, ale nie mam pojęcia, jak wygenerować HTML/CSS (lub obraz).

Węzły na wykresie mogą mieć wiele elementów podrzędnych i wiele elementów nadrzędnych. Strzałki są skierowane. Przykład:

Nie mam nic przeciwko używaniu najnowszych technologii CSS3 i HTML5, ponieważ będą one używane tylko przez wybrane osoby.

Answer 1

Już jakiś czas temu spotkałem się z podobnymi problemami. Rozwiązaniem, na które w końcu przyjechałem, jest mała biblioteka js, która doskonale poradziła sobie z tą sztuczką, a mianowicie Dracula.

Tu jest link do biblioteki: https://github.com/strathausen/dracula

Biorąc pod uwagę Twoje potrzeby, wszystko musisz zrobić, to coś takiego:

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

Dalsze informacje o, dam ci walczyć z dokumentacja.

Mam nadzieję, że to pomaga.

[DODATEK]

Dodam, że, ogólnie rzecz biorąc, chodzi o wyświetlanie węzłów i strzałek nie ma wielkiego, używając SVG czyni go blisko trywialne. Ale rzeczy się komplikują, gdy chcesz zorganizować wyświetlanie węzłów za pomocą reguł takich jak "spróbuj zminimalizować liczbę przekraczających krawędzi", "wyświetl dzieci poniżej ich rodziców", itd., Które wszystkie wymagają skomplikowanej matematyki.

Nie sądzę, że Dracula pozwala na dostosowanie tego rodzaju reguł. Niemniej jednak, biorąc pod uwagę twój komentarz, myślę, że może istnieć niezbyt skomplikowany sposób, aby układ wyglądał jak pionowe drzewo, ponieważ jest to acykliczny wykres (przynajmniej wydaje się być). Ale wtedy będziesz musiał przejść przez tworzenie własnej biblioteki.

Answer 2

Co na temat korzystania z SVG? SVG może być stylizowany przez CSS, do którego dostęp ma Javascript i osadzony w dokumentach HTML. A użycie formatu wektorowego wydaje się odpowiednie dla wizualizacji Graph, ponieważ ma wiele zalet. Zaletą - szczególnie w środowisku sieciowym - jest mniejszy rozmiar dużych wykresów w porównaniu do obrazów bitmapowych.

Dla samej wizualizacji wykresów, przychodzi na myśl Graphviz. Jest to oprogramowanie/biblioteka do renderowania wykresów, która jest aktywnie rozwijana od 1988 roku. Jest w stanie renderować różne typy wykresów i eksportować powstały obraz do różnych formatów graficznych, w tym SVG. Wykorzystuje on tzw. "Język kropki" do opisu wykresów. Spójrz na Graphviz project page, aby znaleźć wiele przykładów i dokumentacji na temat języka dot.

Czy eksperymentowałeś już z dot w linii poleceń? dot to plik binarny z pakietu Graphviz, który odczytuje pliki napisane w języku punktowym i renderuje je do pożądanego formatu obrazu. To dobry punkt wyjścia do eksperymentów.

Użyłem go kiedyś do dynamicznego rysowania diagramów klas PHP. Mam wygenerowany plik .dot w PHP i przetłumaczył ją do SVG używając exec dot -Tsvg graph.dot

Jest też biblioteka PHP wrapper dla Graphviz w repozytoriach PEAR zwanych Image_Graphviz, który jest używany w podobnych projektach, jak Twoja.

Oczywiście konieczne jest skompromitowanie układu, jeśli pracujesz z ogólną biblioteką rysunków graficznych w porównaniu do ręcznego rysowania. Ale kiedy zapoznasz się z językiem dot, osiągniesz najlepsze rezultaty.

Answer 3

Spróbuj z poniższych.,

Wykresy są jednym z najczęściej używanych struktur danych, wraz z połączonymi listami i drzew. W ostatnim projekcie PHP potrzebowałem zbudować strukturę Graph, aby przeanalizować niektóre powiązane adresy URL. Problem był prosty, więc zamiast pisać własny kod, poszedłem z tym, który jest dostępny w repozytorium Pear.

Pakiet Pear Structures_Graph umożliwia tworzenie i manipulowanie strukturami danych wykresu. Umożliwia budowanie grafów ukierunkowanych lub niekierowanych, z danymi i metadanymi przechowywanymi w węzłach. Biblioteka zapewnia funkcje do przechodzenia przez wykres, jak również do charakterystycznej ekstrakcji z topologii grafów.

odnoszą się również w następującej lokalizacji: http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Niektóre Przykładowe kody:

<?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

Jeśli można użyć Python po stronie serwera, można użyć Networkx generować wysokiej jakości grafikę i zapisać ich jako SVG, PNG lub cokolwiek chcesz.