d3.js - ルートノードを使用してティック後にレイアウトを中央に強制する (中央に戻る)

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