Layout diretto dalla forza centrale dopo il segno di spunta usando il nodo root (ritorna al centro)

Question

Sto sperimentando il layout diretto dalla forza usando d3.js. Ciò di cui ho bisogno è centrale il layout per root (o altro nodo selezionato) e restituire questo nodo al centro SVG (EG Canvas) dopo che la funzione di spunta è stata eseguita (il grafico alfa è basso). È possibile? Ho trovato un esempio a

http://bl.ocks.org/1080941

Ma non sono in grado di fare la radice (quando si utilizza APLHA o altri calcoli della funzione di spunta personalizzata) Restituisci al centro (centra il layout con questo particolare nodo).

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

In realtà l'ho risolto in questo modo (simile al precedente ma più sofisticato):

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

Prova a cambiare il gestore degli eventi della forza in questo modo:

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