HTML/CSS Trực quan hóa biểu đồ RBAC

Question

Tôi có cấu trúc RBAC được lưu trữ trong cơ sở dữ liệu của mình (dự án được xây dựng với Yii).

Tôi rất muốn tạo biểu đồ để hình dung mối quan hệ giữa các mục để xem liệu tôi có mắc sai lầm hợp lý hay không và hiển thị cho các thành viên khác trong nhóm.

Tôi đã nghĩ đến việc tạo trang sẽ tạo biểu đồ/cây. Tôi nghĩ rằng tôi có thể xử lý phần phía máy chủ nhưng tôi không có ý tưởng làm thế nào để tạo ra HTML/CSS (hoặc hình ảnh).

Các nút trong biểu đồ có thể có nhiều trẻ em và nhiều cha mẹ. Mũi tên được hướng dẫn. Ví dụ:

Tôi không ngại sử dụng công nghệ CSS3 và HTML5 mới nhất vì nó sẽ chỉ được những người được chọn sử dụng.

Answer 1

Tôi đã gặp phải những mối quan tâm tương tự cách đây một thời gian. Các giải pháp cuối cùng tôi đến với là một thư viện js ít hoàn toàn đã làm các trick, cụ thể là Dracula.

Dưới đây là một liên kết đến các thư viện: https://github.com/strathausen/dracula

Xét nhu cầu của bạn, tất cả các bạn sẽ phải làm một cái gì đó như:

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

Để biết thêm infos, tôi sẽ cho bạn phải vật lộn với tài liệu.

Hy vọng điều đó sẽ hữu ích.

[PHỤ LỤC]

Tôi muốn nói thêm rằng, nói chung, các vấn đề của hiển thị các nút mũi tên và không phải là một vấn đề lớn, sử dụng svg làm cho nó gần tầm thường. Nhưng mọi thứ trở nên phức tạp khi bạn muốn tổ chức hiển thị các nút với các quy tắc như "cố gắng giảm thiểu số cạnh vượt qua", "hiển thị trẻ em bên dưới bố mẹ", v.v. tất cả đều cần toán học phức tạp.

Tôi không nghĩ rằng Dracula cho phép người ta tùy chỉnh loại quy tắc đó. Tuy nhiên, xem xét bình luận của bạn, tôi nghĩ rằng có thể có một cách không quá phức tạp để làm cho bố trí trông giống như cây dọc, vì nó là một biểu đồ tuần hoàn (ít nhất, nó có vẻ là). Nhưng sau đó bạn sẽ phải đi qua việc tạo ra các thư viện của riêng bạn cho việc này.

Answer 2

Điều gì về việc sử dụng SVG? SVG có thể được tạo kiểu bởi CSS, được truy cập bởi Javascript và được nhúng trong các tài liệu HTML. Và việc sử dụng định dạng vectơ dường như là đủ để hình dung đồ thị vì nó có nhiều ưu điểm. Chỉ một lợi thế - đặc biệt là trong môi trường web - là kích thước tệp nhỏ hơn của các biểu đồ lớn so với hình ảnh bitmap.

Để tự hiển thị biểu đồ, hãy xem Graphviz. Nó là một phần mềm vẽ đồ thị/thư viện đã được tích cực phát triển từ năm 1988. Nó có thể hiển thị nhiều loại biểu đồ và xuất hình ảnh kết quả sang các định dạng hình ảnh khác nhau bao gồm SVG. Nó sử dụng cái gọi là 'ngôn ngữ chấm' để mô tả các đồ thị. Hãy xem Graphviz project page để tìm nhiều ví dụ và tài liệu về ngôn ngữ dấu chấm.

Bạn đã thử nghiệm với dot trên dòng lệnh chưa? dot là một nhị phân từ gói Graphviz đọc các tệp được viết bằng ngôn ngữ dấu chấm và hiển thị chúng theo định dạng hình ảnh mong muốn. Đây là một điểm khởi đầu tốt cho các thí nghiệm.

Tôi đã từng sử dụng nó để vẽ sơ đồ lớp PHP động. Tôi đã tạo một tệp .dot trong php và dịch nó sang SVG bằng cách sử dụng exec dot -Tsvg graph.dot

Ngoài ra còn có thư viện trình bao bọc PHP cho GraphViz trong kho PEAR được gọi là Image_Graphviz được sử dụng trong các dự án tương tự như của bạn.

Tất nhiên bạn sẽ phải thực hiện một số thỏa hiệp bố cục nếu bạn đang làm việc với thư viện vẽ đồ thị chung so với việc vẽ chúng theo cách thủ công. Nhưng khi làm quen với ngôn ngữ dấu chấm bạn sẽ đạt được kết quả tốt nhất.

Answer 3

Chỉ cần cố gắng với những điều sau đây.,

Đồ thị là một trong những cấu trúc dữ liệu thường xuyên nhất được sử dụng, cùng với danh sách liên kết và cây cối. Trong một dự án PHP gần đây, tôi cần xây dựng một cấu trúc Graph để phân tích một số url liên kết. Vấn đề là của một bản chất đơn giản, vì vậy thay vì viết mã của riêng tôi, tôi đã đi với một trong những có sẵn trong kho Pear.

Gói cấu trúc Pear Structures_Graph cho phép tạo và thao tác các cấu trúc dữ liệu đồ thị. Nó cho phép xây dựng một trong hai biểu đồ hướng hoặc không được chiếu, với dữ liệu và siêu dữ liệu được lưu trữ trong các nút. Thư viện cung cấp các chức năng cho việc di chuyển biểu đồ cũng như cho khai thác đặc trưng từ tô pô đồ thị.

Cũng tham khảo các vị trí sau: http://www.codediesel.com/algorithms/building-a-graph-data-structure-in-php/

Một số mã mẫu:

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

Nếu bạn có thể sử dụng Python trên phía máy chủ, bạn có thể sử dụng Networkx để tạo ra đồ họa chất lượng cao và tiết kiệm chúng như SVG, PNG hoặc bất cứ thứ gì bạn thích.