title: How to organise node positions in D3 Force layout
body: <p>I have a graph that can potentially have 1000's of nodes with a very nested structure, so when I click a node, it will add more children nodes, and so on. Some children can have multiple parents, and some children can have siblings with different parents. I've put a simple <a href="https://jsfiddle.net/t77x8xur/55/" rel="nofollow noreferrer"><code>fiddle</code></a> together to demo what I've got so far, with just 2 levels of data for brevity.</p>
  
  <p>This is my simulation setup...</p>
  
  <pre><code>var simulation = d3.forceSimulation(mergedData.nodes)
    .velocityDecay(0.55)
    .force('charge', d3.forceManyBody().strength(-100).distanceMin(10000))
    .force('collide', d3.forceCollide(25))
    .force('link', d3.forceLink(mergedData.links)
       .id((d) =&gt; { return d.id; })
       .distance(400)
       .strength(0.1)
    )
    .force('y', d3.forceY(height / 2))
    .force('x', d3.forceX(width / 2))
    .on('tick', ticked);
  </code></pre>
  
  <p>I'm trying to arrange the layout of the nodes so the parent > child relationship is more clear. Ideally I'd like to give the user 2 options, a tree structure, and a radial / grouped structure like so:</p>
  
  <p><a href="https://i.stack.imgur.com/KRVLH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/KRVLH.png" alt="illustration to demonstrate node layout"></a></p>
  
  <p>I'm really struggling to see how I go about doing this, so any help would be greatly appreciated.</p>
  
  <p>Thanks!</p>
  
  <p>P.S. I'm using the v4 API</p>