レイアウトを固定化したd3.js描画ネットワーク

Question

私は現在、どこかからSELECTを繰り返し、どこかにINSERTを繰り返す私の前任者によって書かれたバッチスクリプトの構造を視覚化することに取り組んでいます。私はツリー関数を使用しようとしましたが、JSONの同じインデックス内の同じ名前を同じノードとして認識させたい場合には柔軟性がありませんでした。

私はフォースレイアウト機能を使用することに決めました。そして、グーグルの助けを借りてほぼ完了しました。しかし、私は部分を初期化するために同じ領域に同じデータベースのグループをマップすることができますが、何らかの理由でforce.on（ "tick"、function（）~~は各ノード間の距離を再計算します。これは、それはノード間のリンクを表示しません

誰でもリンクはJSONを使用して再計算されながらレイアウトを固定化する方法を知ってい 私のコードは次のようである：。。

  node.append("circle") 
       .attr("cx", function(d) { return d.group*70; }) 
       .attr("cy", function(d) { return d.index*10; }) 
       .attr("r", 10) 
       .attr("fill", function(d) { 
        return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")"; 
       }); 

      node.append("text") 
       .attr("dx", function(d){return d.group*70;}) 
       .attr("dy", function(d){return d.index*10;}) 
       .text(function(d) { return d.name }); 
      force.on("tick", function() { 
       alert(debugPrint(this)); 
       link.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; }); 

       node.attr("transform", function(d) { 
        return "translate(" + d.x + "," + d.y + ")"; 
       }); 
       //node.attr("transform", function(d) { return "translate(0)"; }); }); 
      }); 

Answer 1

あなたの場合function(d){ d.fixed = true }のような関数を追加し、目盛りの間に各ノードで呼び出された場合（または最初の目盛りの間に多分）、静的なグラフが表示されます。そうでない場合は、codの後にforce.stop() eが実行される（または最初のダニの間に同様に）。

私が遭遇した問題は、コードブロックの末尾にあるforce.stop()を呼び出すと、グラフが凍結してSVGの中央に正しく収まるようになったことです。静的グラフについて心配していなかったので、場所に移動されたときにノードを固定させる「mousedown」イベント関数。

Answer 2

あなたは基本的に、あなたは、力のレイアウトを作成し、それをノードとリンクを割り当てて、それを起動監督可視化http://bl.ocks.org/mbostock/1667139

のために静的で見ることができます。

次に、force.tick（）メソッドticksを実行します。これにより、レイアウト内の各ノードの位置が計算されます。良いグラフを得るためには、ticksの値を試してみる必要があります。この値はグラフのノード数に比例して増やす必要があります。

force = d3.layout.force(); 

ticks=2000; //number of ticks for calculating the force layout 

force 
    .nodes(nodes) //nodes = array of nodes 
    .links(links) //links = array of links 
    .start(); 

for (var i = ticks; i > 0; --i) force.tick(); 

force.stop(); 

上記のコードが始まる前にこれを行う必要があります。

ノードとリンクの配置に使用できる強制オブジェクトがあります。 ノード変数とリンク変数に属性を直ちに割り当てる（以前はtick関数内で行われていた）

コードは今のようになります。

node.append("circle") 
    .attr("cx", function(d){return d.group*70; }) 
    .attr("cy", function(d){return d.index*10;}) 
    .attr("r", 10) 
    .attr("fill",function(d){ 
     return "rgb(" + (255 - d.group*20) + ",0,"+(d.group*50) + ")" 
    }) 
    .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; }); 

node.append("text") 
    .attr("dx", function(d){return d.group*70;}) 
    .attr("dy", function(d){return d.index*10;}) 
    .text(function(d) { return d.name }); 

link.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; });