7

データベースにRBAC構造が保存されています（Yiiで構築されたプロジェクト）。

グラフを作成してアイテム間の関係を視覚化し、論理的な間違いを犯していないかどうかを確認し、他のチームメンバーに見せたいと思います。

グラフ/ツリーを生成するページを作成しようと考えていました。サーバー側の部分は処理できると思いますが、HTML / CSS（または画像）を生成する方法がわかりません。

グラフのノードには、複数の子と複数の親を含めることができます。矢印が向けられています。例：例

最新のCSS3とHTML5の技術を使用してもかまいません。これは、選択した人だけが使用するためです。

4

4 に答える 4

3

私はしばらく前に同様の懸念に遭遇しました。私がついに思いついた解決策は、そのトリックを完璧に実行した小さな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を使用すると簡単になります。しかし、「交差するエッジの数を最小限に抑えるようにする」、「親の下に子を表示する」など、すべて複雑な数学を必要とするルールを使用してノードの表示を整理する場合は、事態が複雑になります。

ドラキュラがそのようなルールをカスタマイズすることを許可しているとは思いません。それでも、あなたのコメントを考えると、それは非巡回グラフであるため、レイアウトを垂直ツリーのように見せるためのそれほど複雑ではない方法があると思います（少なくともそうです）。ただし、このために独自のライブラリを作成する必要があります。

于 2013-01-02T09:29:02.200 に答える
1

SVGの使用はどうですか？SVGは、CSSでスタイルを設定したり、Javascriptでアクセスしたり、HTMLドキュメントに埋め込んだりできます。また、多くの利点があるため、ベクトル形式を使用することはグラフの視覚化に適しているようです。特にWeb環境での利点の1つは、ビットマップ画像と比較して大きなグラフのファイルサイズが小さいことです。

グラフの視覚化自体については、Graphvizが頭に浮かびます。1988年から積極的に開発されているグラフレンダリングソフトウェア/ライブラリです。さまざまな種類のグラフをレンダリングし、結果の画像をSVGを含むさまざまな画像形式にエクスポートできます。いわゆる「ドット言語」を使用してグラフを記述します。Graphvizプロジェクトページを見て、ドット言語に関する多くの例とドキュメントを見つけてください。

dotコマンドラインでもう実験しましたか？dotは、ドット言語で記述されたファイルを読み取り、それらを目的の画像形式にレンダリングするGraphvizパッケージのバイナリです。それは実験の良い出発点です。

私はかつて、PHPクラス図を動的に描画するために使用しました。PHPで.dotファイルを生成し、それを使用してSVGに変換しましたexec dot -Tsvg graph.dot

また、PEARリポジトリにはImage_Graphvizと呼ばれるGraphViz用のPHPラッパーライブラリがあり、これはあなたと同様のプロジェクトで使用されます。

もちろん、一般的なグラフ描画ライブラリを手動で描画する場合と比較して作業している場合は、レイアウトを妥協する必要があります。しかし、ドット言語に精通すると、最良の結果が得られます。

于 2013-01-08T08:35:01.827 に答える
1

次のことを試してみてください。、

グラフは、リンクリストやツリーとともに、最も頻繁に使用されるデータ構造の1つです。最近のPHPプロジェクトでは、相互にリンクされた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-08T12:44:45.477 に答える
0

サーバー側でPythonを使用できる場合は、Networkxを使用して高品質のグラフィックを生成し、SVG、PNGなどの任意の形式で保存できます。

于 2013-01-09T07:29:29.813 に答える