CODEWITHSUNDEEP
javascriptd3.jsforce-layout
Owen Masback
Owen Masback

Reputation: 520

How to prevent d3.js force layout from pulsating/bouncing on resume/restart

I have a d3 force layout that I occasionally resume on user interaction to get the nodes moving around a bit. Unfortunately this has the undesirable (to me) effect of bouncing/pulsating all the nodes every time it resumes. It's as if gravity is temporarily increased for a fraction of a second pulling all the nodes inward.

To recreate, open this page http://bl.ocks.org/mbostock/raw/4062045/, and run force.resume() in the console. You can see this effect on any of Mike Bostock's force bl.ocks examples.

Is there a way to prevent that? I tried to set all the nodes to fixed for a bit until gravity returned to normal, but it didnt work.

Upvotes: 6

Views: 1107

Answers (1)

SmokeyShakers
SmokeyShakers

Reputation: 3402

You can run through the first x ticks before plotting. That stops the pop-in:

  const simulation = d3.forceSimulation(nodes)
      .force("link", forceLink)
      .force("charge", forceNode)
      .force("center",  d3.forceCenter())
      .tick(2000) // tick 2000 times (enough for the system to rest)
      .on("tick", ticked)

;

Upvotes: 0

Related Questions