Display D3 Tree Layout in Linear Format

Question

I am following the D3 Collapsible Tree Layout guide and am trying to change the layout of the tree from

To a linear format, where the 'root' node is the left-most node on the tree

I don't know much about D3 just yet but I assume the d3.diagonal() function along with the nodes x & y parameters control the lines and node position. Any input or guides on this that would point me in the right direction?

Answer 1

do this

self.diagonal = d3.svg.line().interpolate('step')
    .x(function (d) { return d.x; })
    .y(function (d) { return d.y; });

And then use the generator like this:

link.enter().append('svg:path', 'g')
    .duration(self.duration)
    .attr('d', function (d) {
        return self.diagonal([{
            y: d.source.x,
            x: d.source.y
        }, {
            y: d.target.x,
            x: d.target.y
        }]);
    });