title: Each parent-child pair has same color in D3 Hierarchy Typescript
body: <p>I was trying to work with one great example of &quot;D3 Collapsible Force Layout&quot; from <a href="https://codepen.io/jefarrell/pen/ReYKPa" rel="nofollow noreferrer">here</a>. I have modified the input data as following</p>
  <pre><code> const data = {
   &quot;name&quot;: &quot;directory&quot;,
   &quot;children&quot;: [
    {&quot;name&quot;: &quot;1st file&quot;, 
      &quot;children&quot;: [{&quot;name&quot;: &quot;1f 1st function&quot;, &quot;group&quot;: 1},  
      {&quot;name&quot;: &quot;1f 2nd function&quot;, &quot;group&quot;: 1},
      {&quot;name&quot;: &quot;1f 3rd function&quot;, &quot;group&quot;: 1},
      {&quot;name&quot;: &quot;1f 4th function&quot;, &quot;group&quot;: 1}], &quot;group&quot;: 1,},
    {&quot;name&quot;: &quot;2nd file&quot;, &quot;children&quot;: [
      {&quot;name&quot;: &quot;2f 1st function&quot;, &quot;group&quot;: 2},
      {&quot;name&quot;: &quot;2f 2nd function&quot;, &quot;group&quot;: 2}], &quot;group&quot;: 2},
    {&quot;name&quot;: &quot;3rd file&quot;, &quot;children&quot;: [
      {&quot;name&quot;: &quot;3f 1st function&quot;, &quot;group&quot;: 3}
    ], &quot;group&quot;: 3},
    {&quot;name&quot;: &quot;4th file&quot;, &quot;children&quot;: [
      {&quot;name&quot;: &quot;4f 1st function&quot;, &quot;group&quot;: 4},
      {&quot;name&quot;: &quot;4f 2nd function&quot;, &quot;group&quot;: 4},
      {&quot;name&quot;: &quot;4f 3rd function&quot;, &quot;group&quot;: 4}
    ], &quot;group&quot;: 4}
   ],
   &quot;group&quot;: 0
  }
  </code></pre>
  <p>I want to have the same color for all the parent-child nodes based on the group value.
  For example: All the &quot;group:1&quot; will have red color, &quot;group:2&quot; green color and so on. Can anyone please help me to figure that out? Thank you for your time.</p>