D3.js Marked tree with direct links

Question

My code is based on the indented D3.js example .

I want direct links instead of curved links between parent / child objects.

I understand that this has something to do with the following code, however I cannot find a solution. I want the links to be straight with a 90 degree rotation.

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

Answer 1

The problem is extracting the x and y points from the links. One way to do this:

Link Generator:

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

And then use the generator as follows:

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

Answer 2

You are almost there. You need to use a regular line with suitable interpolation, e.g.

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

You may need to adjust the exact interpolation mode.