問題タブ [dagre]

ユーザーが要素を削除したり、新しい要素を追加したり、さまざまな順序で再リンクしたりできる、JointJS のプロセス フロー図を実装しています。グラフは、何かが削除、追加、リンク解除、または再リンクされるたびにグラフを再編成するために、joint.layout.DirectedGraph ライブラリの自動レイアウト機能と Dagre を使用しています。奇妙な問題が 1 つ発生しましたが、その処理方法はまだわかりません。

両側に 1 つずつ、2 つの出力ポートと上部に 1 つの入力ポートを持つ「フォーク」プロセスがあるとします。配列内の要素の順序によっては、自動レイアウトによって左側のポートの子要素が右側のポートの子要素の右側に配置されることがあるため、結果のリンクが交差します。

レイアウトのランク順に影響を与える簡単な方法はありますか? 物事が変化したときに配列内の要素を並べ替えて、Dagre の観点から扱いやすくすることができると思いますが、実際に並べ替えが実際にどのように機能するかはわかりません。さらに良いのは、az インデックスに似た属性ですが、左から右へのバイアスを設定でき、Dagre がそれを尊重しますが、そのようなものがコードに隠れているとは思いません。

このような発生を解消するためにレイアウトをスクラブする方法について、誰かアイデアや提案はありますか?

よろしくお願いします！

ノードの形状をノード テキストのサイズに変更しようとしています。https://github.com/cytoscape/cytoscape.js/issues/649の指示に従いました。でも：

1. 形状は常に高さ = 幅になります
2. すべての形状のサイズは同じです。
3. シェイプのサイズが最大に達したようで、それを超えると拡大できません。

(これが dagre レイアウトと関係があるかどうかはわかりません。)

dagre レイアウトで次のライブラリを使用しています。

• cytoscape.min.js
• dagre.min.js

• cytoscape-dagre.js

  /li>

d3.js に基づく dagre-d3 を使用しています。グラフがレンダリングされた後、すべてのコンテンツに合わせてズームし、中央に配置する必要があります。

ご覧のとおり、中央に配置できますが、身長が 400 であるため、すべてのコンテンツに収まらないようです。

他のダグレの状況に使用できるソリューションが必要であることに注意してください。たとえば、0.5 にスケーリングするだけでこの場合に適合する可能性がありますが、これは私が望むものではありません。

JSFIDDLE: https://jsfiddle.net/bababalcksheep/xa9rofm5/8/

コード：

d3.js を使用して svg グラフのノードのラベルを再度レンダリングせずに変更したい。グラフを何度も生成したくはありませんが、ノード ラベルのデータのみを変更します。

ラベルの値を変更すると、グラフを再度描画する「レンダラー」を再度呼び出す必要があるようです。

JointJS/Rappid ダイアグラム ライブラリを使用して、有向グラフのノードのサブセットのみをレイアウトする方法を探しています。

グラフ内にいくつかの「固定」ノードが必要であり、「その他」をレイアウトします。それらは相互に、またはいくつかの固定ノードと接続できると仮定します（グラフはすでに紙に追加されています）。

APIはグラフオブジェクトで使用する必要があるためjoint.layout.DirectedGraph.layout、レイアウト計算中にグラフの一部のノードを「固定」するメカニズムがあるかどうか疑問に思っていました（たとえば、セルオブジェクトに追加するプロパティ）。また、このようなものでも問題ありませんが、getSubgraph API で受信リンクと送信リンクを取得しないでください。

ドキュメントを見ると、この種の機能を特定できませんでした。この機能がサポートされていない場合、目標を達成するために使用できる他のアプローチはありますか? (もちろん、グラフ全体をレイアウトし、操作が終了したときに固定コードを適用することもできますが、これよりも優れたものを探していました)。