d3.js: how to offset starting and ending points in links in tree layout

Question

I have a tree layout using d3 that has 3 parts to each node visually (paths nested inside a node). What I am trying to do is to change the starting point for the link depending on the node type, but keep the end point of the link to the center of the new node. So the final layout could have points that start from one of 2 positions (top visual hex, or bottom hex). Here is a mockup of what I am looking to do: Mockup of desired connector links

This is what I currently have by just using the diagonal function and adding in an offset: Current screenshot

I know that I can use the diagonal function to offset a static amount as seen in the screenshot above, however this applies to both the start and end position of the link: var diagonal = d3.svg.diagonal() .projection(function(d) { return [d.y + 50, d.x]; });

This will offset the link by 50 horizontally (I have the orientation flipped), which is great for the parent node, but I want the child node to have a different offset and just draw to d.y.

Any help is greatly appreciated.

Phil Rodgers Phil Rodgers · Accepted Answer · 2016-04-21T10:15:58

I don't know if you got this sorted already, but this worked for me:

    var diagonal = d3.svg.diagonal()
        .source(function (d) {
            return {x: d.source.x, y: d.source.y};
        })
        .target(function (d) {
            return {x: d.target.x, y: d.target.y + rectWidth};
        })
        .projection(function (s) {
            return [s.y, s.x + (rectHeight / 2)];
        });

I also flipped x/y, but I go from right to left so you may need to fiddle with the params.

First post -- please be gentle.

d3.js: how to offset starting and ending points in links in tree layout

1 Answers