問題タブ [dagre]

NPM で Dagre をインストールした後、Node で Dagre を要求しようとしています (Dagre wiki のドキュメントに従います)。なぜこれが機能しないのですか？

d3 では、関数を使用して要素の塗りつぶしスタイルを指定できました。例えば

dagre-d3 で同じことを行う方法はありますか?

私が試してみました

dagreライブラリを使用してJointJs UML グラフを描画しようとしています。私が理解しているように、空間内の配布ノードの問題を解決することはできません。カスタムデータセットがあります。最初のステップで、dagre レイアウトを作成して、ノードの X 座標と Y 座標を生成します。次に、最初から JointJs の要件に合わせて新しいデータ セットを作成し、dagre レイアウトから取得した X 座標と Y 座標を設定してレンダリングします。結果はこちらで確認できます。最初のグラフはdagre-d3でレンダリングされ、2 番目は JointJs でレンダリングされます。私は両方のバリアントが好きではなく、2 つの質問があります。

• グラフコンテナの幅を確実に設定し、「行」の合計幅がコンテナ幅よりも大きい場合、ノードを下に移動する方法は? どちらのライブラリも 600x800 のキャンバスにグラフを描画しようとするため、下に十分なスペースがあります。

• 最初のチャートのように、JointJs UML チャートの上部と左側で svg ボーダーと UML ダイアグラムの間のオフセットを削除するにはどうすればよいですか?

  code available here http://jsfiddle.net/zeleniy/mpa6b47k/

cytoscape.js で dagre レイアウトを使用して単純なツリーを描画する方法。layout{ name: 'dagre'} を配置して dagre.js を追加しましたが、動作しません。arbor.js では動作しますが、dagre を使用してツリーの結果を確認したいと思います。私はjavascriptの初心者です。私の英語に感謝し、申し訳ありません！私のコード:

dagre-d3の非常に複雑なTCP 状態図の例を見た後、同様の複雑さの図を解決できると考えました。次の図では、明らかにそうではありません。2 つのマークされたノードが交換された場合、すべての交差が解決されます。

もう 1 つの興味深い点は、グラフがどれだけうまく解決されるかは、エッジを設定した順序に依存するように見えることです。

次のコード

これと同じ結果は得られません:

次の 2 つの例を参照してください。

• 完璧なグラフ
• めちゃくちゃなグラフ

示唆されたように、代わりにcola.jsを使用しようとしましたが、同じグラフは次のようになります。

ご覧のとおり、colajs はクロス リダクションで優れていますが、レイアウトは dagre ほど構造化されておらず、明確ではありません。colajs には次の設定を使用します。

dagre と同様に、より構造化されたように見えるように colajs を構成することは可能ですか? そして、dagre は単にこのような問題を解決できないのでしょうか、それともそのように構成することは可能でしょうか?

私は Cytoscape.js を初めて使用し、ユーザーの検索入力に応じて Dagre レイアウトを使用してグラフを描画しようとしています。通常、ノード数は 50 ～ 100 です。

Dagre は 1 つのツリーに対しては適切に機能しますが、グラフに複数のツリーが含まれる (場合によっては独立したノードが含まれる) 場合、これらのツリーのルートは (図のように) 自動的に水平に配置されるため、ノードとラベルが非常に小さくなります。横のスペースをうまく活用できれば、グラフはきっと見やすくなります。

私の質問は、レイアウト スペースを十分に活用するために、ツリーを垂直に配置する (たとえば、4 つのルートを 1 行に配置し、他のルートをこれらのツリーの下に配置する) ために、複数ツリーの状況にどのように対処できるかということです。

現在、動的に作成されたデータに基づいて有向非巡回グラフ(最大 1000 ノード、最大 10000 エッジ)を描画する必要があるWeb アプリケーション (AngularJS)を構築しています。

1年以上にわたり、必要なレイアウトを計算し、スタイルを設定でき、ズームおよびパン可能でインタラクティブなグラフを描画するライブラリ/ツールを探しています(たとえば、マウスオーバーで子供を強調表示します)。

Graphvizは最良の結果を生み出すツールですが、Web サーバーで使用する準備ができていません (特に、OS を保証できず、使用したくないため)。

私はdagreを試してみましたが、それはd3 レンダリングです - とても気に入っていますが、2 つの大きな欠点があります。受け入れられなくなっています。

次に本当に説得力があるように見えたのはcytoscape.jsでした。これは、出力が非常に見栄えがよく、さらに大きなグラフを描画するのがかなり高速であるためです (そして、パフォーマンスの微調整が可能です)。しかし、その標準的なレイアウト (cose や幅優先など) では、必要な出力が生成されません。

私の現在の観点からは、2 つのチャンスがあります。

1) dagre.js でレイアウトを作成し、cytoscape.jsで結果を描画します (レイアウト: ' preset '、dagre レイアウトから計算されたノードの x と y を使用)。ただし、「化合物」/クラスターはそのようにはサポートされていません。

2) [viz.js] ( https://github.com/mdaines/viz.js ) (Graphviz のスクリプト化された Javascript バージョンであり、グラフの描画にはあまり適していません) を使用して、結果をプレーンな出力形式として計算し、再びこの結果を使用してcytoscape.jsで描画します。

今私の質問：

1) それを達成するための別のアイデアはありますか?

2) 私のアイデアが正しければ、チェーンを理想的にリンクする方法についてヒントをいただけますか?

(AngularJS -> REST バックエンド -> JSON からフロントエンド -> dagre または viz 用に JSON を再構築 -> レイアウトを計算 -> cytoscape に結果を入力 -> ブラウザでレンダリング?!?)クライアント自体ではなく、node.jsフロントエンドサーバー(これもパフォーマンスのため)?

ヒントやアイデアは大歓迎です。