Saturday 15 May 2010

javascript - D3: Show network reaching layout, then stop force -


I'm trying to freeze my D3 network after reaching a nice layout (Alpha reaches 0) . I want the force to completely shut down, even if the node is pulled (the user should be able to rearrange the nodes manually). I think I know how to do the second part of the nodes by modifying the function called Moushudown and mouseup. However, I can not find the original layout and the cold to work.

I have seen examples where the network is displayed after the layout is completed. However, I want to display the network because it is reaching the stable layout. I added it at the end of the function which draws the network:

  while (force.alpha (>> 0.005) {force.tick (); } force stop();   

With this addition, the network is not displayed until it goes to force.stop () . Does anyone know how I can get it to display during "Tic"?

Edit: Here tick function:

  function tick (e) {console.log (force.alpha ()); If (force: elf () <0.05) {force.stop (); } Var H = STG; If (E. ELFA & lt; 0.05) {var q = d3.geom.quadtree (nodes), i = 0, n = nodes.length; Whereas (++ i and lt; n) {q.visit (bump (nodes [i], e.lfa)); }} Path.attr ("d", function (d) {// target the total difference diffX in source x and y- d.target.x - d.source.x; diffY = d.target.y - D .source.y; // Length of the path from the center of the source node from the center of the target node = math.Sqrt (diffX * diffX) + (diffY * diffY) + // External edge from the X and Y distance center To target node offsetX = (diffX * d.target.radius) / pathLength; Offset Y = (diffY * d.target.radius) / pathLength; if (d.target.y & lt; d.source.y) {var AvgY = (D.target.y + d.source.y) / 2; if (d.target.fixed! = True) {d.target.y = avgY;} if (d.source.fixed! = True) {D} .source.y = avgY;}} Return "M" + d.source.x + "," + d.source.y + "L" + (d.target.x - offsetX) + "," + (D.arget.y - offsetY);}); // Place the circle within the screen var r = 6; Circle.attr ("cx", function (d) {return dx = Math.max (r + d.radius, Math.min (w - r, dx))}} .attr ("cy", function (d) ) {Return DI = math.max (D. radius, math.min (h - d., RDIS, DI))}); Text.attr ("transform", function (d) {return "translation (" + d.x + "," + d.y + ")";}); }    

tick event handler - You can rebuild the network on Tick and stop it.

No comments:

Post a Comment