DOTなしでd3.jsを使用した有向非巡回グラフ
D3.jsを使用して有向非巡回グラフを描画しようとしています。レイアウトを検索しているときに、 Dagre に出くわしましたが、DOTベースのコードをどこにも使用したくないので、あまり役に立たないようです。このための純粋なJavascriptソリューションまたはDAGのプラグイン/カスタムレイアウトについて誰かが知っている場合は、私に知らせてください。前もって感謝します。
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でクロックインします。
有向非巡回グラフのレンダリング（および実際に有向性プロパティの強調表示）は、 杉山 レイアウトアルゴリズムのドメインです。
基本的に、（トポロジカルソートを介して）ノードにレイヤーを割り当て、レイヤー内のノードのシーケンスを計算します。単純なヒューリスティックを使用して最初にサイクルを逆にすることで、これは循環グラフでもうまく機能します。 Graphviz DOTには、 dot と呼ばれるこのレイアウトの実装があります。これは、使用するファイル形式の名前でもあるため、DOTについて言及するときに少し混乱することがあります。
もちろん、アルゴリズムの他の実装もあります。クロスコンパイルされたJavascriptバージョンのdotでさえ 利用可能 です。 Javascriptで利用できるおそらく最も機能が完全なソリューションは、 yFiles ライブラリでのアルゴリズムの商用実装です。したがって、これが商用シナリオの場合は、対応する ライブデモ を確認することをお勧めします。 yFilesには独自のレンダリングとエディターの実装が付属していますが、レイアウトアルゴリズムをスタンドアロンの実装として使用して、ノード、エッジ接続ポイントの座標を「ただ」計算できるため、コードをd3.jsにプラグインすることもできます。ベンド、およびラベル。この特定の実装は、「ポート制約」（発信エッジと着信エッジの方向、およびノードでの正確な位置を制限するため）、階層的にグループ化されたノード（各ノードが親ノードを持つことができる）など、多数の追加の制約をサポートします。親ノードには、そのすべての子ノードが「含まれています」）、レイヤーとシーケンスの制約、エッジのラベル付けの制約、さまざまなエッジルーティングスタイル、バスルーティングなどがあります。
開示：私は上記のライブラリを作成する会社で働いていますが、SO私は雇用主を代表していません。