問題タブ [dagre-d3]

有向グラフの描画にdagreを使用しましたが、svg、d3、dagre、およびgraphlibが互いにどのように依存しているかを理解しようとしていますか? 基本的に、一方が停止し、他方が開始する場所。

私の限られた理解で収集できることを指摘しようとします。

1. svg : (XML ベースのベクター画像形式ですが、基本的にはそれです) は、円、楕円、四角形などを描画し、g 要素を使用して 2 つ以上の形状をグループ化し、変換などを適用できる html タグです。

2. d3 : d3 は、基本的にデータを svg と結合できる JavaScript ライブラリです。そのため、毎回 svg タグを記述する代わりに、基本的にプログラミング、ループ、データなどを使用して svg コードを作成します。

   今dagre、dagre-d3、graphlibに来て、私が上で言ったことは意味があると仮定して問題を抱えているところです:)

3. dagre,dagre-d3 : これは dagre のページに書かれていることです " Dagre は、クライアント側で有向グラフを簡単にレイアウトできるようにする JavaScript ライブラリです。dagre-d3 ライブラリは、dagre のフロントエンドとして機能し、実際のレンダリングを提供します。 D3を使用。」

   誰かが私にこれを説明してもらえますか? では、dagre、dagre-d3 内で d3 関数を使用できますか? うーん..私はすでに混乱しています.これらすべてがどのように共存するかを例で説明できますか? このコード スニペットは、私が考えたものです。

   ここで、drawNodes は dagre-d3 の関数ですが、オーバーライドされており、その中に d3 関数 ( d3.select(this).classed ) を渡しています。うーん...それはどうなっているのですか？d3.select は html 要素にしかできないと思っていたのですが？ここの「これ」って何？

4. graphlib : これはグラフライブラリのページで、マルチグラフのデータ構造を提供すると書かれています。しかし、つまり、これらのライブラリは d3 または dagre-d3 用に構築されているのでしょうか?

混乱しているように聞こえますが、わかります！これらがどのように関連しているか、どの機能を何の中で使用できるかについて、誰かが例を挙げて説明してくれれば、私は拾うことができます。

ありがとう。

データの視覚化にdagre d3を使用し、順序付けられた図を作成していますが、エッジの設定に行き詰まっています。私が立ち往生しているこのコードを見てください

ダイアグラムは順序付けられており、ルートが一番上にあります。ルート ノードから、ルートからレベル 0 のすべてのノードへのエッジを作成することができました。次に、レベルが 0 で子を持つすべてのエッジからエッジを作成し、次にレベル 1 で子を持つエッジなどからエッジを作成します。私はすでに似たようなことを試し、この構造を C# の json に保存しましたが、私は JavaScript 初心者であるため、C# コードを JavaScript に書き直すことはできません。

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

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

私が試してみました

dagre-d3.js を使用して階層グラフを作成しています。ここで、ノードをクリック可能にして機能を実行する必要があります。私はそれを達成することができません。

現在、私のコードの一部は次のようになります

TEST または TEST1 をクリックして、作成した関数を実行して、ページ上の同じ名前の div (TEST, TEST1) に移動できるようにする必要があります。

私はこれを見てきましたが、それは私を助けません。 https://github.com/cpettitt/dagre-d3/issues/13 また、これは私が利用できない別の方法を使用しているようです。

ガイドしてください

ありがとう、ニヒル

グラフ全体をパンおよびズームできるだけでなく、特定のノードを 1 つドラッグできる機能を実装しました。この時点での問題は、ノードをドラッグしているときにエッジを更新する方法が見つからないことです。

ここでは、最小限のセットアップを見つけることができます。

http://codepen.io/anon/pen/XJZrxm

の：

もちろん、この動作はより多くのノードとエッジでも機能するはずです。

dagre-d3 グラフ レイアウト ライブラリを使用してグラフを作成することができました。ライブラリは素晴らしく機能しますが、ドキュメントが少し不足しているようです。

私のグラフは実際には次の例のようになります: http://cpettitt.github.io/project/dagre-d3/latest/demo/interactive-demo.html

私が本当にやりたいのは、エッジをカスタマイズして、次の図のようにすることです。

したがって、基本的には、エッジを表す svg パス要素をカスタマイズする必要があります。いくつかの調査を行ったところ、graphviz スタイル (矢印、色など) を使用できるようですが、接続パス自体をカスタマイズする方法は見つかりませんでした。

どうにかしてカスタマイズすることは可能ですか？