How do I transition from a force layout graph to one where I have positioned the nodes?

Question

I have a force layout graph. i have a button that when i click it, it sorts the nodes out in some sort of order. Giving them absolute coordinates on the screen.

I wish to, when i click this button, transition between both movements smoothly rather than just jump straight into it. I want to do this so further down the line i can see where the nodes are coming from

Answer 1

When the user clicks to switch to the "static" positioning:

1. stop the force layout (either by calling .stop() or unsubscribing/ignoring the "tick" event).

2. Apply the positioning you want to all the nodes. By nodes, I mean the Array that you pass to force.nodes() , which the force layout had been updating with x and y values. In "static" mode, you'll want to set the x and y coords yourself, to whatever you need them to be.

3. Call your update function (or render, refresh or whatever you called it). This presumes that you already have such an update function, which you call at every tick of the force layout. After steps 1 and 2, calling this update function should "just work", since it shouldn't be aware of whether there's a force layout or some other logic that's moving the nodes around. Inside this function, you must be using d3's usual enter, update, exit. That's where you can use d3's transition() method to make all the DOM nodes smoothly transition from where the force layout last put them to where your static layout logic puts them.

4. You'll likely find that you only want to call transition() when in static mode, not during the force layout mode, so you might want to refine the update function's logic to only optionally call transition() on the selection.