title: Hiding Root node in d3 tree
body: <p>I'm using <a href="http://bl.ocks.org/shubhgo/80323b7f3881f874c02f" rel="nofollow noreferrer">this wonderful weighted-tree d3 demo</a> as a jumping-off point for a data flow diagram. Unfortunately, I really need the ability to have separated trees (i.e. two trees with no connected nodes).
  I decided to solve this problem by making the root node and the branches from it invisible and unclickable. (this way each child under it will appear to be an individual tree, but will still do all the correct spacing.</p>
  <p>I've successfully hidden the links from the root node to it's children by adding a new case to the <code>linkColor</code> function, setting the color to white, and assigning that colorCode to the children of root.</p>
  <p>Where I'm stuck now is hiding the root node itself. I tried making it's size 0, but that disappears it AND all children, grandchildren, etc. nodes. And size 1 is still visible.</p>
  <p>I've tried going the javascript route instead of data route, and have tried adding style attributes, adding classes that hide with css, skipping over the coloring functions, etc. But the primary issue with the javascript is that I honestly can't figure out how to isolate/FIND just the root node.</p>
  <p>Things I've tried:</p>
  <pre><code>d3.json(&quot;example.com/mylink.json&quot;, function(error, flare) {
    edge_weight.domain([0,flare.size]);
    root = flare;
    root.x0 = height / 2;
    root.y0 = 0;
    root.attr(&quot;class&quot;, &quot;root&quot;); //I've tried this
    root.style(&quot;fill&quot;, &quot;#ffffff&quot;); //I've tried this
    root.circle.style(&quot;fill&quot;, &quot;#ffffff&quot;); //tried this
    root.children.forEach(collapse);
    update(root);
  });
  </code></pre>
  <p>I've tried affecting the node property itself and settings/style applied to nodes, but again, I can't figure out how to pull out/identify just the root.
  Any help/thoughts are appreciated!</p>