7

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

whatwg
  • 314
  • 2
  • 13

2 Answers2

5

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.

Andrew Reid
  • 37,021
  • 7
  • 64
  • 83
  • 3q, it was render quickly, i am sorry that my question was not clear, your answer was matched with my question, but it caused the graph was dense and not my hope, do you have some other idea for render quickly but not make graph dense? – whatwg Jan 21 '18 at 04:23
  • That's the trade off really (and unfortunately) - greater speed, lesser idealized result (regardless of method). As Gerardo states above, you might need to reduce the number of nodes. – Andrew Reid Jan 21 '18 at 18:52
0

I don't think the right answer is to lower the value of alpha decay. Even though the time is saved, but the result of the layout is not good.

The reason for the high time cost is that most of the time is spent in the process of rendering layout. You can use a new tool called NetV.js, which uses WebGL to render large-scale networks and accelerate the rendering process.

You can change the dataset of this demo into yours and see the resulting layout.

yaqi xu
  • 1
  • 1