title: JS / d3.js: Creating groups for source/target links
body: <p>I have been trying to colour some nodes based on their links but I am not sure how to do so. Here is my current graph:</p>
  
  <p><a href="https://i.stack.imgur.com/OTmm0.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/OTmm0.png" alt="My current Graph"></a></p>
  
  <p>I have been trying to automatically colour all nodes that are within the same cluster (i.e. Connected to each other either by being a source or a target to any node within the cluster), but so far all my attempts have been futile..</p>
  
  <p>I heard that I might need to do a recursive function, but my recursion is self-taught and is fundamentally wrong. Here is my current code:</p>
  
  <pre><code>function assignGroup() {
  var groupedNodes = [];
  
  for(var i = 0; i &lt; gNodes.length; i++) {
      if(nodes[i].group !== undefined) {
          nodes[i].group = undefined;
      }
  }
  
  for(var i = 0; i &lt; nodes.length; i++) {
      if(nodes[i].group === undefined) {
          nodes[i].group = i;
          recursive(nodes[i],i);
      }
  }
  
  
  function recursive(rNode, rGrp) {       
      var tempSrc = hasSrc(rNode);        
      var tempTarg = hasTarg(rNode);
  
      if(tempSrc == null &amp;&amp; tempTarg == null)
          return;
  
      if(tempSrc != null &amp;&amp; tempSrc.group === undefined) {
          tempSrc.group = rGrp;
          recursive(tempSrc, rGrp);
      }
  
      if(tempTarg != null &amp;&amp; tempTarg.group === undefined) {
          tempTarg.group = rGrp;
          recursive(tempTarg, rGrp);
      }
  }
  
  function hasTarg(eNode) {
      for(var i = 0; i &lt; edges.length; i++) {
          if(nodes.name == edges[i].source)
              return getNode(nodes, edges[i].target);
          else
              return null;
      }
  }
  
  function hasSrc(eNode) {
      for(var i = 0; i &lt; edges.length; i++) {
          if (nodes.name == edges[i].target)
              return getNode(edges[i].source);
          else
              return null;
      }
  }
  
  function getNode(id) {
      console.log(id);
      for(var i = 0; i &lt; nodes.length; i++) {
          if(id == nodes[i].name) {
              return nodes[i];
          }
      }
      return null;
  }
  </code></pre>
  
  <p>My approach is to assign a group to each node, and to colour them based on their group, essentially tackling two birds with one stone (Group can be used for future implementations as well). </p>
  
  <p>My dataset is:</p>
  
  <pre><code>{
  "nodes":
  [
   {
     "name": "Ben",
  },
   {
     "name": "May",
  },
   {
     "name": "Jack",
  },
   {
     "name": "Francis",
  },
   {
     "name": "Owen",
  },
   {
     "name": "Blake",
  },
   {
     "name": "Julia",
  },
   {
     "name": "Liam",
  }
  ],
  "edges":
  [
      {
          "source":"Ben",
          "target":"May"
      },
      {
          "source":"Ben",
          "target":"Blake"
      },
      {
          "source":"Ben",
          "target":"Owen"
      },
      {
          "source":"Owen",
          "target":"Julia"
      }
  ]
  }
  </code></pre>
  
  <p>Here is the intended outcome of my dataset for node:</p>
  
  <pre><code>"nodes":
  [
   {
     "name": "Ben",
     "group": 1
  },
   {
     "name": "May",
     "group": 1
  },
   {
     "name": "Jack",
     "group": 2 /*Arbitrary group (Ungrouped)*/
  },
   {
     "name": "Francis",
     "group": 3 /*Arbitrary group (Ungrouped)*/
  },
   {
     "name": "Owen",
     "group": 1
  },
   {
     "name": "Blake",
     "group": 1
  },
   {
     "name": "Julia",
     "group": 1
  },
   {
     "name": "Liam",
     "group": 4 /*Arbitrary group (Ungrouped)*/
  }
  ]
  </code></pre>
  
  <p>Edit: Here is the jsfiddle: <a href="https://jsfiddle.net/ehnf76xg/2/" rel="nofollow noreferrer">https://jsfiddle.net/ehnf76xg/2/</a></p>