d3.js Indented tree with straight links

Question

My code is based on the D3.js Indented tree example.

I want straight links instead of the curved links between parent/child-objects.

I understand this has someth

Answer 1

The problem is to extract the x and y points from the links. One way of doing this is:

Link generator:

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
            }]);
        });