How to turn Reingold–Tilford Tree into double sided tree in D3

Question

I am presently working on this example http://bl.ocks.org/mbostock/4339184 and am seeking advice on how to convert this tree into a double sided tree. The reason behind me using this tree structure is my texts/labels are very long and want to fit them in one single page. I also tried the option of radial tree but the long labels create overlaps with other labels. I tried to wrap some text according to a parameter called size but wasn't successful. My code for radial tree is available in this link http://jsfiddle.net/hv6wc7x5/ The actual labels which I want to use are very long as shown in the link. I cannot discuss the labels as this is a part of research work and cannot be shown publicly.

Basically I wan't to ask two questions in this post. First, is there a way to transform the normal Reingold–Tilford tree into a double sided tree.

And the second question is if there is a way to wrap the text for selected texts according to the size attribute given in the JSON. The code I want to change is given below but it doesn't work, if any one can help me in fixing this it would be great. In the last line of the code segment, I want to call the wrap function(an internal method in my code) based on the check that my attribute size equals to some value but I am unable to do it. Can anyone let me know how can I improve the last line?

node.append("text")
                  .attr("dx", function(d) { return d.x < 180 ? 10 : -10; })
                  .attr("dy", ".31em")
                  .attr("text-anchor", function(d) { return d.x < 180 ? "start" : "end"; })
                  .attr("transform", function(d) { return d.x < 180 ? null : "rotate(180)"; })
                  .text(function(d) { return d.name; })
                  .attr("wraper", function(d) { return d.size == "3534" ? node.call(wrap,0) : node.call(wrap,0);
});

It would be great if anyone of the above questions are answered although I would love that my first question is answered.

Answer 1

I'm not sure what you mean by double sided tree ? You mean two trees side by side ? If so you'll have to split your data.

As for the second question, can't you use nodes.filter. filter them via your 'size' attribute in your data ?

Answer 2

As suggested in the other answer, the best course of action is to split the data into a "left" and "right" tree. Each of these trees has a common node, the "root node".

When rendering the tree "all" you have to do is keep the root nodes on top of each other.