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 something to do with the following code, however, I can't find a solution. I want the links to be straight with a 90-degree turn.

var diagonal = d3.svg.diagonal()
    .projection(function(d) { return [d.y, d.x]; });

These types of links are considered to be 'orthogonal' – Ian Jul 22 '13 at 12:16 — Ian, Jul 22 '13 at 12:16

score 4 · Accepted Answer · answered Jul 25 '13 at 07:36

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

score 1 · Answer 2 · answered Jul 22 '13 at 12:18

1

You're almost there. You need to use a normal line with a suitable interpolation, e.g.

var line = d3.svg.line().interpolation("step")
                 .x(function(d) { return d.y; })
                 .y(function(d) { return d.x; });

You may have to tweak the exact interpolation mode.

answered Jul 22 '13 at 12:18

Lars Kotthoff

107,425
16
204
204

As [Simenhg showed](http://stackoverflow.com/a/17851829/109618) `d3.svg.line()`, by itself, can not be used as a simple drop-in replacement for `d3.svg.diagonal()`, since they return different things. – David J. Sep 10 '14 at 14:40
See also [Substituting d3.svg.diagonal() with d3.svg.line()](http://stackoverflow.com/a/20116569/109618). – David J. Sep 10 '14 at 14:51

d3.js Indented tree with straight links

2 Answers2

Linked