केंद्र बल टिक के बाद लेआउट निर्देशित रूट नोड (केंद्र के लिए रिटर्न)

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