title: Hierarchical force diagram using D3.js
body: <p>I would like to generate a hierarchical force diagram using D3.js - a force directed graph that allows you to navigate a tree-like structure by clicking on nodes expanding the graph to the children level (where the relationships between the childrens are shown). The nodes can be related to each other in two ways, parent or sibling. The parent relationship indicates that nodes "belong to" their parent. </p>
  
  <p>As a starting point I have looked at the force cluster example: <a href="https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html" rel="nofollow noreferrer">https://github.com/mbostock/d3/blob/master/examples/force/force-cluster.html</a>, and included the relationships above but I can't figure out how to only render the expanded cluster and not the whole network (see image below).</p>
  
  <pre><code>JSON data:
  {"nodes":
          [
          {"name":"Person 0","group":"Person 0"},
          {"name":"Person 1","group":"Person 1"},
          {"name":"Person 2","group":"Person 1"},
          {"name":"Person 3","group":"Person 1"},     
          {"name":"Person 4","group":"Person 3"},
          {"name":"Person 5","group":"Person 3"}  
          ],
  "links":
          [
          {"source":1,"target":0,"type":"sibling"},
          {"source":2,"target":1,"type":"parent"},
          {"source":3,"target":1,"type":"parent"},
          {"source":3,"target":2,"type":"sibling"},
          {"source":4,"target":3,"type":"parent"},
          {"source":5,"target":3,"type":"parent"},
          {"source":4,"target":5,"type":"sibling"}
          ]
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/VtGMR.jpg" alt="Expanding cluster"></p>
  
  <p>Above: Force diagram, where the red links indicate the sibling relationship.</p>
  
  <p>It would also be possible to arrange the "children" as children in the JSON, instead of using the parent "type":</p>
  
  <pre><code>{
  "nodes": [
      {
          "name": "Person 0",
      },
      {
          "name": "Person 1",
          "children": [
              {
                  "name": "Person 2",
              },
              {
  .
  .
  .
  "links": [
      {
          "source": 1,
          "target": 0
      },
  .
  .
  </code></pre>
  
  <p>However, how do you then combine the tree-structure while keeping track of the relationships  between the children nodes?</p>
  
  <p>An imaginative tree-like structure would look like:
  <img src="https://i.stack.imgur.com/CwQDD.jpg" alt="Tree"></p>
  
  <p>The lower section indicates a desired layout of the visual (similar function to the one in the upper image).</p>
  
  <p>Do you have any suggestions of how to proceed?</p>