Diseño dirigido a la fuerza central después de la marca utilizando el nodo raíz (regresar al centro)

Question

Estoy experimentando con el diseño dirigido por la fuerza usando d3.js. Lo que necesito es centrar el diseño por raíz (u otro nodo seleccionado) y devuelve este nodo al centro SVG (por ejemplo, lienzo) después de que se realiza la función de garrapata (el gráfico alfa es bajo). ¿Es posible? Encontré un ejemplo en

http://bl.ocks.org/1080941

Pero no puedo hacer que la raíz (cuando use APLHA u otro cálculo de la función de tics personalizada) regrese al centro (Center el diseño por este nodo particular).

Cualquier ayuda sería apreciada.

Answer 1

En realidad, resolví esto así (similar a la anterior pero más sofisticada):

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

Intenta cambiar el controlador de eventos de fuerza así:

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