Bố trí theo hướng lực lượng trung tâm sau khi đánh dấu bằng nút gốc (quay lại giữa)

Question

Tôi đang thử nghiệm với bố cục lực lượng hướng dẫn sử dụng D3.js. Những gì tôi cần là căn giữa bố cục bằng gốc (hoặc nút được chọn khác) và trả nút này về trung tâm svg (ví dụ: canvas) sau khi chức năng đánh dấu được thực hiện (biểu đồ alpha thấp). Có thể không? Tôi tìm thấy một ví dụ tại

http://bl.ocks.org/1080941

nhưng tôi không thể làm cho gốc (khi sử dụng aplha hoặc tính chức năng tùy chỉnh đánh dấu khác) trở về trung tâm (trung tâm bố trí bằng nút đặc biệt này).

Mọi trợ giúp sẽ được đánh giá cao.

Answer 1

Thật sự tôi giải quyết này như thế này (tương tự như trước nhưng phức tạp hơn):

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

Cố gắng thay đổi điều khiển lực lượng sự kiện như thế này:

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