Hiding Root node in d3 tree

Question

I'm using this wonderful weighted-tree d3 demo 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.

I've successfully hidden the links from the root node to it's children by adding a new case to the linkColor function, setting the color to white, and assigning that colorCode to the children of root.

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.

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.

Things I've tried:

d3.json("example.com/mylink.json", function(error, flare) {
  edge_weight.domain([0,flare.size]);
  root = flare;
  root.x0 = height / 2;
  root.y0 = 0;
  root.attr("class", "root"); //I've tried this
  root.style("fill", "#ffffff"); //I've tried this
  root.circle.style("fill", "#ffffff"); //tried this
  root.children.forEach(collapse);
  update(root);
});

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!

Answer 1

root is the object containing the tree data, not the root node.

For hiding the root node and making it unclickable, use the depth (the root has depth = 0)

.style("opacity", function(d, i) {
        return !d.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.depth ? "none" : "all";
    }); 

For the links, use the same logic with depth:

.style("opacity", function(d, i) {
        return !d.source.depth ? 0 : 1;
    })
    .style("pointer-events", function(d, i) {
        return !d.source.depth ? "none" : "all";
    });

Since you didn't post your code, here is the bl.ocks you shared with those changes: http://bl.ocks.org/anonymous/f29fa00c15a515cae95eb4699128cf03/d2c697b76c8e1e60af1a503b07dcdda94dcd3b2b