ルートノード（センターに戻る）を使用してティック後のセンター強制指示レイアウト

Question

D3.jsを使用してフォースリダイレクトレイアウトを試しています。必要なのは、ルート（または他の選択されたノード）によるレイアウトの中心となり、ティック機能が完了した後（グラフアルファが低い）、このノードをsvg（例えばキャンバス）センターに戻すことです。出来ますか？私は

http://bl.ocks.org/1080941

での例を見つけましたが、私は（aplhaまたはその他のカスタムティック関数計算を使用している場合）ルートを作るセンター（中央、この特定のノードによってレイアウト）に戻りすることができません。

ご協力いただければ幸いです。

Answer 1

実は私は（以前に似ていますが、より洗練された）このように、これを解決：ご返信用

force.on("tick", function(e) { 

    node.attr("transform", function(d) { 
     //TODO move these constants to the header section 
     //center the center (root) node when graph is cooling down 
     if(d.index==0){ 
      damper = 0.1; 
      d.x = d.x + (w/2 - d.x) * (damper + 0.71) * e.alpha; 
      d.y = d.y + (h/2 - d.y) * (damper + 0.71) * e.alpha; 
     } 
     //start is initiated when importing nodes from XML 
     if(d.start === true){ 
      d.x = w/2; 
      d.y = h/2; 
      d.start = false; 
     } 

     r = d.name.length; 
     //these setting are used for bounding box, see [http://blockses.appspot.com/1129492][1] 
     d.x = Math.max(r, Math.min(w - r, d.x)); 
     d.y = Math.max(r, Math.min(h - r, d.y)); 

      return "translate("+d.x+","+d.y+")";    

    } 
    ); 

    }); 

Answer 2

は、このような力のイベントハンドラを変更してください：

force.on("tick", function(e) { 
nodes[0].x = w/2; 
nodes[0].y = h/2; 

var k = 0.05 * e.alpha; 
      nodes.forEach(function(o, i) { 
      o.y += (nodes[0].y - o.y) * k; 
      o.x += (nodes[0].x - o.x) * k; 
      }); 

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("cx", function(d) { return d.x; }) 
    .attr("cy", function(d) { return d.y; }); 
});