d3.js controlling initial animation in force layout

Question

I have read a lot about influencing the initial animation of the force layout but am afraid I have not understood it yet.

I have found out (and could implement) this example, about how to effectively "stop" it.

But my question is, is it possible to control it (i.e to influence how long it takes until "force stops"?).

From the documentation it seems that alpha is the parameter to change but it does not make a difference ( I tried negative values, zero and positive value without any noticeable difference).

Here is a jsdiddle of what I am trying to do : yrscc fiddle of what I am trying to do.

var force = d3.layout.force()
    .nodes(d3.values(datax.nodes))
    .links(datax.links)
    .size([xViewPortArea.Width, xViewPortArea.Height])
    .linkDistance(xGraphParameters.xLinkDistance)
    .charge(xGraphParameters.xCharge)
    .on("tick", tick)
     .alpha(-5)  // HERE 
    .start();

My questions:

• which value of alpha would actually influence the number of iterations ? (I thought that it was is meant with " *If value is nonpositive, and the force layout is running, this method stops the force layout on the next tick and dispatches an "end" in the documentation
• in this this posting a function is proposed by @JohnS which apparently can help . But I have not understood where one is supposed to call it.

P.S: another cool option is to have an image on the screen and then compute the optimal layout in the background like here. But I gave up trying to implement it

Answer 1

One way to cool down the force layout is to force the tick events:

var k = 0;
while ((force.alpha() > 1e-2) && (k < 150)) {
    force.tick(),
    k = k + 1;
}

the alpha value measures the temperature of the force, lower values indicate that the layout is more stable. The number of ticks to consider it stable will depend on the number of nodes, I have had good results with 50-200. The friction coefficient will help to stabilize the force, but the layout will be less optimal.