19

有向グラフの描画に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 関数を使用できますか? うーん..私はすでに混乱しています.これらすべてがどのように共存するかを例で説明できますか? このコード スニペットは、私が考えたものです。

    var oldDrawNodes = renderer.drawNodes();
renderer.drawNodes(function(graph, root) {
  var svgNodes = oldDrawNodes(graph, root);
  svgNodes.each(function(u) { 
     d3.select(this).classed(graph.node(u).nodeclass, true); 
  });
  return svgNodes;
});

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

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

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

ありがとう。

4

1 に答える 1

24

graphlib は、グラフを表すデータ構造を提供します。レイアウトやレンダリングは行いません。したがって、以下は純粋なgraphlibです。

var g = new Graph();
g.setNode(...);
g.setEdge(...);

dagre は、ノードのレイアウト (x および y の配置) を実行します。ノードは、graphlib グラフによって表されます。レンダリングは行いません。dagre-d3 を使用せずにカスタム レンダリングを実行する場合を除き、ほとんどの場合、自分で呼び出すことはありません。

dagre-d3 はレイアウトに dagre を使用し、d3 を使用してレンダリングします。dagre-d3 にはデフォルトで dagre と graphlib が含まれていることに注意してdagreD3.dagreくださいdagreD3.graphlib。

SVG は d3 の出力形式です。これは、通常の HTML を埋め込むこともできる汎用のベクター グラフィックス フォーマットです。各 SVG ノードは DOM ノードでもあります。d3.selectこれが、SVG ノードでも機能する理由です。

投稿したスニペットは、ノードにクラスを設定するための後処理を実行するように見えます。リンク先の例はそれ以来更新されているようで、そのコードはもう含まれていません。

于 2014-11-14T10:17:16.490 に答える