web-dev-qa-db-ja.com

DOTなしでd3.jsを使用した有向非巡回グラフ

D3.jsを使用して有向非巡回グラフを描画しようとしています。レイアウトを検索しているときに、 Dagre に出くわしましたが、DOTベースのコードをどこにも使用したくないので、あまり役に立たないようです。このための純粋なJavascriptソリューションまたはDAGのプラグイン/カスタムレイアウトについて誰かが知っている場合は、私に知らせてください。前もって感謝します。

15
A.G.

Dagreの作者はこちら。 Dagreにはgraphvizコードは含まれていません。これは純粋なJavaScriptです。ただし、同様のレイアウト手法に基づいています。どちらも杉山紙の技法に基づいています。

ここでdagreのいくつかの例を見つけることができます:

http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.htmlhttp://cpettitt.github.io/project/dagre- d3/latest/demo/sentence-tokenization.htmlhttp://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.html

縮小されたソースはここにあります: http://cpettitt.github.io/project/dagre-d3/latest/dagre-d3.min.js 。約44Kでクロックインします。

30
Chris Pettitt

有向非巡回グラフのレンダリング(および実際に有向性プロパティの強調表示)は、 杉山 レイアウトアルゴリズムのドメインです。

基本的に、(トポロジカルソートを介して)ノードにレイヤーを割り当て、レイヤー内のノードのシーケンスを計算します。単純なヒューリスティックを使用して最初にサイクルを逆にすることで、これは循環グラフでもうまく機能します。 Graphviz DOTには、 dot と呼ばれるこのレイアウトの実装があります。これは、使用するファイル形式の名前でもあるため、DOTについて言及するときに少し混乱することがあります。

もちろん、アルゴリズムの他の実装もあります。クロスコンパイルされたJavascriptバージョンのdotでさえ 利用可能 です。 Javascriptで利用できるおそらく最も機能が完全なソリューションは、 yFiles ライブラリでのアルゴリズムの商用実装です。したがって、これが商用シナリオの場合は、対応する ライブデモ を確認することをお勧めします。 yFilesには独自のレンダリングとエディターの実装が付属していますが、レイアウトアルゴリズムをスタンドアロンの実装として使用して、ノード、エッジ接続ポイントの座標を「ただ」計算できるため、コードをd3.jsにプラグインすることもできます。ベンド、およびラベル。この特定の実装は、「ポート制約」(発信エッジと着信エッジの方向、およびノー​​ドでの正確な位置を制限するため)、階層的にグループ化されたノード(各ノードが親ノードを持つことができる)など、多数の追加の制約をサポートします。親ノードには、そのすべての子ノードが「含まれています」)、レイヤーとシーケンスの制約、エッジのラベル付けの制約、さまざまなエッジルーティングスタイル、バスルーティングなどがあります。

開示:私は上記のライブラリを作成する会社で働いていますが、SO私は雇用主を代表していません。

4
Sebastian