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

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

• javascript
• d3.js
• web-worker

Share Improve this question Follow edited Mar 25, 2020 at 14:27 whatwg asked Jan 21, 2018 at 3:46 whatwgwhatwg 40355 silver badges1616 bronze badges 6

• You could also just disable the animation, showing the force layout already done. Look at my answer here: stackoverflow./a/47522074/5768908 – Gerardo Furtado Commented Jan 21, 2018 at 5:51
• yes i was do it like your solution but ~1000 nodes also cost almost 20 seconds, do you have any other ideas? – whatwg Commented Jan 21, 2018 at 8:58
• 2 Nope, that solution is the fastest way. There is no magic here, you'll have to reduce the number of nodes. – Gerardo Furtado Commented Jan 21, 2018 at 9:16
• ok thank you very much,Whether it is necessary to use server side rendering ? i run it at express maybe cost the same time pare web worker – whatwg Commented Jan 21, 2018 at 9:26
• I have no idea regarding that. Maybe you can ask it as a new post. – Gerardo Furtado Commented Jan 21, 2018 at 9:28

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 7

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.

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.