Layout diretto della forza centrale dopo aver spuntato usando il nodo radice (ritorno al centro)

Question

Sto sperimentando con il layout diretto della forza usando D3.js. Quello di cui ho bisogno è centrare il layout per root (o altro nodo selezionato) e restituire questo nodo al centro svg (ad esempio canvas) dopo che la funzione tick è 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 altro calcolo funzione tick personalizzato) ritorna al centro (centro layout questa particolare nodo).

Qualsiasi aiuto sarebbe apprezzato.

Answer 1

In realtà ho risolto questo come questo (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

provare a cambiare il gestore di eventi 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; }); 
});