D3.js tree custom node overlapping
<p>I searched the forum for similar problem but I did not find anything.</p>

<p>I am using <a href="http://blog.zubasoft.at/Examples/D3.js/OrgChart/index.htm" rel="nofollow noreferrer">this d3-based org chart</a> as a starting point.</p>

<p><a href="https://i.stack.imgur.com/WOwnT.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WOwnT.png" alt="enter image description here"></a></p>

<p>Above is the bottom part of my tree. On the <strong>leaf nodes</strong> (yellow) I have to resize them to accommodate more elements which I don't know how many in advance.
The result is one node overlaps other nodes.</p>

<p>Hope you guys can help me out here:</p>

<p><strong>1/</strong> How do I resize the nodes without disrepect the spacing between them?</p>

<p><strong>2/</strong> Even if I can manage to make nodes on yellow branch <em>not overlapped</em>, when I expand nodes on <em>green branch</em>, they still overlap nodes on the yellow side?</p>

<p><strong>3/</strong> or is there a better way to achieve this?</p>

<p>Thanks!</p>