d3.js Indented tree with straight links
d3.js, hierarchy
Solution
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
}]);
});
Problem
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]; }); ```