問題タブ [dagre-d3]

こんにちは、私はこのコードを持っています: https://jsfiddle.net/fa765d2o/1/

(dagre-d3 プラグインに貼り付けなければならなかった js の部分については申し訳ありませんが、それを機能させる他の方法を知りませんでした)

だから私はd3.jsとdagre-d3を使って組織図を作成します。新しい関係を作成する機能の追加に取り組んでいます。

これは、ノードの 1 つをクリックして別のノードにドラッグし、マウスを放すことで機能します。2 つのノードが接続され、グラフが更新されます。

問題は、1回目以降はうまくいかないので、「Drone-3」を「Drone-7」に接続すると動作するのですが、その後「Drone-3」を他の誰かに接続したい場合「許可されていない」カーソルが表示されます。

これは基本的にコードの重要な部分です...魔法が起こる場所です:)

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

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

次のコード

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

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

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

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

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

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

D3 と dagre-d3 を使用して次の図を作成しました。

ノードをクリックすると、クリックされたノードの詳細を見つける必要があります。だから私は次のコードを書いた -

var selectedNode = inner.selectAll("g.node"); selectedNode.on('click', function (d) { console.log('clicked '+d); });

ただし、これはノード名を提供するだけです。「ステータス」、「作成日」、「実行者名」など、nodesJsonから他の属性も出力したいと思います。

誰かがこれについてどうすればよいかアドバイスしてもらえますか?

ありがとうございました

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

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

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

ジーシャン

このグラフhttp://cpettitt.github.io/project/dagre-d3/latest/demo/tcp-state-diagram.htmlを使用しています。ノードをクリックすると、何らかのWebアドレスにリダイレクトされる必要があります。

私はこれを試しました：

私はこの概念を試しました: http://jsbin.com/siyorezedi/1/edit?html,css,js,output

しかし、私のノードはクリックできず、エラーはスローされません。

誰が私がどこで間違っているのか教えてもらえますか? ありがとうございました。