make d3 force static layout more quickly

Question

I am new in d3js. I rendered a graph ~10000 nodes.

I used web worker and static force render ( because normal render is costing more than twice than the web worker).

// js
var nodes = d3.range(10000).map(function(i) {
  return {
    index: i
  };
});

When the range was 10000, it will cost almost 20 seconds, you can see it at console, so how to reduce this times?

jsfiddle

Answer 1

You are looking to modify the alpha decay rate, which controls the rate at which the force simulation cools:

The alpha decay rate determines how quickly the current alpha interpolates towards the desired target alpha; since the default target alpha is zero, by default this controls how quickly the simulation cools. Higher decay rates cause the simulation to stabilize more quickly, but risk getting stuck in a local minimum; lower values cause the simulation to take longer to run, but typically converge on a better layout. To have the simulation run forever at the current alpha, set the decay rate to zero; alternatively, set a target alpha greater than the minimum alpha [to decrease cooling time]. (api docs).

The default setting of alpha decay is ~0.0228, if you want to reduce the time needed for the force to cool, you can increase the alpha decay rate so that it cools faster:

  var simulation = d3.forceSimulation(nodes)
      .force("charge", d3.forceManyBody())
      .force("link", d3.forceLink(links).distance(20).strength(1))
      .force("x", d3.forceX())
      .force("y", d3.forceY())
      .alphaDecay(0.5)

The cost might be a layout that is less desirable, but this will speed up the final result. Here's an Updated fiddle.