d3js cluster layout dendogram node links to custom depths

Question

I am trying to use d3js to develop a collapsing cluster dendogram with custom depths for the nodes. I can make the nodes appear where I'd like them to but the links drawn between the nodes using diagonal aren't going to the right spots.

The links are going to where the nodes would be if I didn't give them a custom depth (date) on line 66. Date is just a number attribute in the json for how many pixels from the top I'd like the node.

.attr("transform", function(d) { return "translate(" + d.x + "," + d.date + ")"; });

When I try to modify lines 92 and 93 I get an error like this in the console: "Problem parsing d="M0,C0,NaN 0,NaN 0,""

    var o = {x: source.x0, y: source.y};
    return diagonal({source: o, target: o});

I avoided a tree layout to avoid the tidy tree automatic layout that d3 uses, but this is ported over from a tree layout so maybe I didn't do that right. Any idea what I'm doing wrong?

Here's a fiddle with the example: http://jsfiddle.net/lucastimmons/RQLh9/2/

Answer 1

You're using the .date attribute to determine the y position of the nodes, so you need to do the same to determine the start/end points of the links. You can modify the projection of the diagonal to also use .date (if it's present) to determine the y position:

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