Link offsets?

[tomkcook]

Is your feature request related to a problem? Please describe.
I have an existing diagram that I'm trying to port to force-graph. This is a feature that we've hacked into a different display system and would like to see here.

Describe the solution you'd like
It would be nice to be able to specify an offset for the end of a link. JSON might look something like this:

{
    "links": [
        {
            "source": "node_1",
            "target": "node_2",
            "offsets": {
                "source": { "x": 0, "y": 20 },
                "target": { "x": 0, "y": 0 }
            }
        }
    ]
}

The offsets, offsets.source and offsets.target keys should be optional, with defaults of zero offset.

This is useful when you have a custom shape for a node with a particular connection point, which may vary from link to link.

Describe alternatives you've considered
Difficult to see an alternative.

[vasturiano]

@tomkcook thanks for reaching out.

I'd recommend looking into the linkCanvasObject method. This will allow you to specify a custom way to draw the links using canvas operations. That way you can add your own logic that offsets the lines and/or do any other transformations as needed.

If it's useful here's how the module does the drawing by default:

force-graph/src/canvas-force-graph.js

Lines 240 to 249 in a25a47e

	const start = link.source;
	const end = link.target;
	if (!start || !end || !start.hasOwnProperty('x') || !end.hasOwnProperty('x')) return; // skip invalid link
	ctx.moveTo(start.x, start.y);
	const controlPoints = link.__controlPoints;
	if (!controlPoints) { // Straight line
	ctx.lineTo(end.x, end.y);

You should only need to invoke two Canvas commands: moveTo and lineTo.