同じページのd3 forceレイアウトの複数インスタンス

Question

私の目標は、d3 forceレイアウトを使用して、同じノードを共有する2つの異なるネットワークを表示することです。たとえば、4人の人の中で、ソーシャルネットワークと系図ネットワークを定義できます。ノードは同じ（人）ですが、リンク（関係）は異なる可能性があります。 2つの別々の力レイアウト、2つの別々のsvgキャンバスを作成し、別々の変数を定義しようとしても、ノードはxとyの位置情報を共有しています。ここ 1つのネットワーク上のノードをドラッグする、最小の例であり、他のネットワーク内のそれらの位置を変更： 以下http://amath.colorado.edu/student/larremore/nodesSharingPositiond3

、Iは、ネットワークのいずれかを作成するために呼び出される関数を投稿し、そしてコードは作成しますotherは非常に似ていますが、すべてのインスタンスで異なる変数名を使用します。両方のネットワークを作成するコメント付きコードは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(); 
} 

Answer 1

私は2枚のSVGパネルサイド・バイ・サイドを示し、生物学的regulatory networksを閲覧できるツールを書きました。各パネルには、d3.js APIによって作成された強制レイアウトネットワークが含まれています。

私は、この作業を行う上での鍵は、重複する可能性があるDOMのすべての要素に一意の名前を付けることです。

私の場合、すべてのパネル要素には、それぞれ_leftと_rightを使用してください。要素は、それぞれ左側または右側のパネルにあります。それは追跡するための多くの作業ですが、ネットワークレンダラはその呼び出しとイベントを正しい要素とネットワークにターゲット設定できます。あなたのケースでは

：

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

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

Answer 2

Javascriptは、状態が共有されているかどうかを不明瞭にするために有名です。あなたの最小限の例はもはや利用できませんが、私が同じ問題に遭遇したとき、私は完全なクローンが必要なところだけを浅いコピーにしていたという結論でした。 （私はD3が入力として持っているリンクとノードについて話しています）

D3コードが共有データの変更を選択したかどうかによって、実際のコピーがなければ、 「現場で」あるかないか。パフォーマンス上の理由から、一般的にD3はではなくをコピーしようとします。

これは、jsonコールの回避策が機能する理由です。すべてのデータを完全にストリング化することによって、事実上、クローン操作が強制されます。