d3-force-directed-graph | Dynamic Force-Directed Graphs | Data Visualization library

I want to allow users to view their network using either a d3 forceSimulation or a CoLa layout, which means when a user fires an event, I need to change out which of those layout algorithms is updating the x and y attributes of my nodes and edges.

In particular, this requires that I be able to stop the simulations and prevent them from updating those attributes on the data I give them while the other is "active" -- as well as removing the drag handlers associated with them.

My render function currently has:

I'm trying to make a force directed graph where the children and grandchildren nodes are circling/orbiting the parent. Meanwhile the parent node is connected to its children nodes, and each children nodes are connected to each of their grandchildren.

Visually, it would look something like this:

I've tried meddling with the default force directed graph (both here and there) but it seems like there is no way to order them neatly in circle/orbit like the visual I'm trying to make.

I tried looking up the orbit code, but it seems like it requires a completely different approach.

Here is my fiddle and code: https://jsfiddle.net/znqkcLhs/