javascript - dagre-d3 でのエッジ配置

Question

dagre-d3 を使用しており、このサンプル グラフを作成しました。1 でマークされたサンプルで交差の問題を回避することは可能ですか。ノードの下部へのエッジ接続をマークすることは可能かもしれません。この機能を実現する方法がわかりません。誰かがそれを手伝ってくれますか?

さらに、エッジ 2、3、および 4 をまっすぐにすることは可能ですか。それらをまっすぐにするのに十分なスペースがあります。私はそれを行う方法を知りません。

どんな助けでも大歓迎です。

ジーシャン

Answer 1

これは、解決しようとしている非常に重要な問題です。AFAIK dagre は、 Brandes-Köpfのアルゴリズムの変形を使用してアライメントを計算します。そのアルゴリズムは理解できたとしても、それを調整するのは非常に困難です。代わりに、完全に異なるアルゴリズムを使用すると、より良い結果が得られる可能性があります: yFiles for HTML の階層/杉山スタイル レイアウトの実装では、シンプレックス ネットワーク ランク割り当てアルゴリズムが使用され、通常、あなたが見ている問題に悩まされることはありません (そうでなければ、非常に素晴らしいです)。 ） 図。GraphViz にもそのアルゴリズムの実装があるため、これを使用すると、例でもより良い結果が得られるでしょう。シンプレックス アプローチは計算コストがはるかに高くなりますが、構成と微調整は非常に簡単です。

あなたの最初のポイントについて：ソースをざっと見てから、Dagreのサンプルに問題が発生する理由を理解できませんでした。入力エッジのポート割り当てが正しく機能していないようです。ポートの位置は、前のレイヤーのノードの相対的な位置に従ってソートする必要があります。間違っているのはベジェ コントロール ポイントだけではないようです。

Answer 2

最新の dagre ライブラリには、これらの問題はもうないと思います。私はあなたの図を複製しました (デモはここをクリックしてください)。まったく同じではありませんが、よく似ています。

デモ サイトは、dagre によって提供される mermaid によって提供されます。