6

私の目標は、d3 フォース レイアウトを使用して、同じノードを共有する 2 つの異なるネットワークを表示することです。たとえば、4 人の間で、ソーシャル ネットワークと系図ネットワークを定義できます。ノード (人) は同じですが、リンク (関係) は異なる場合があります。2 つの別々のフォース レイアウト、2 つの別々の SVG キャンバスを作成し、別々の変数を定義しようとしても、ノードは x と y の位置情報を共有しています。以下は、一方のネットワークでノードをドラッグすると、もう一方のネットワークでの位置が変わる最小限の例です: http://amath.colorado.edu/student/larremore/nodesSharingPositiond3

以下に、ネットワークの 1 つを作成するために呼び出される関数を掲載しました。もう 1 つのネットワークを作成するコードは非常に似ていますが、すべてのインスタンスで異なる変数名を使用しています。両方のネットワークを作成するためのコメント付きコードはhttp://amath.colorado.edu/student/larremore/nodesSharingPositiond3/lib/minimal.jsにあり、変数の定義に使用されるスクリプトは /driver/minimalScript.js < -- これを直接リンクするのに十分な評判がありません。謝罪いたします！

d3.force の動作のどこかで、位置情報はグローバルであるか、グローバルに選択されているか、または何かです。誰かがこれに光を当てることができますか? 私は、位置情報を分離しておくためのソリューションと、d3.force が位置計算を処理および更新する方法を理解することに興味があります。

function makeYNet() {

// This populates the YactiveLinks variable with the proper YLinks. The goal is to be able to only display links whose value is above some threshold.
for (var i=0; i<YLinks.length; i++) {
    if (YLinks[i].link2 > thr) {
        YactiveLinks.push(YLinks[i]);
    }
}

// Add nodes and links to forceY
forceY
.nodes(YNodes)
.links(YactiveLinks);

// Draw lines
var Ylink = svgY.selectAll("line.link")
.data(YactiveLinks)
.enter()
.append("line")
.attr("class", "link")
.style("stroke-width", 2.0);

// Draw nodes
var Ynode = svgY.selectAll("circle.node")
.data(YNodes)
.enter().append("circle")
.attr("class", "node")
.attr("r", radius)
.attr("high",0)
.attr("id", function(d,i) {
      return ("idy" + i);
      })
.style("fill", function(d) { return color(d.group1); })
.call(forceY.drag)
;

// Define tick 
forceY.on("tick", function() {
          Ylink
          .attr("x1", function(d) { return d.source.x; })
          .attr("y1", function(d) { return d.source.y; })
          .attr("x2", function(d) { return d.target.x; })
          .attr("y2", function(d) { return d.target.y; });

          Ynode.attr("cx", function(d) { return d.x; })
          .attr("cy", function(d) { return d.y; });
          });

// Start 'er up
forceY.start();
}
4

2 に答える 2

5

2 つの SVG パネルを並べて表示する生物学的調節ネットワークを閲覧できるツールを作成しました。各パネルには、d3.js API によって描画されるように、強制レイアウト ネットワークが含まれています。

これを機能させるための鍵は、DOM 内のすべての要素に一意の名前を付けることであり、重複する可能性があることがわかりました。

私の場合、要素がそれぞれ左または右のパネルにあるすべてのパネル要素の末尾に_leftandを使用しました。_right追跡するのは大変な作業ですが、ネットワーク レンダラーはその呼び出しとイベントを正しい要素とネットワークに向けることができます。

あなたの場合：

.attr("id", function(d,i) {
      return ("idx" + i);
      })

return値を、ノードが関連付けられているネットワークを一意にアドレス指定するものに置き換えます。私が行ったように、インデックス番号付けスキームを使用する場合でも、接尾辞ベースのアプローチを使用する場合でも、秘訣はすべてのid名前が一意であることを確認することです。

于 2012-11-30T18:08:30.120 に答える