linkAnchors

A link anchor of a link is a point on the reference link that this link wants to reach as its endpoint. Link anchors are set via a linkAnchor property provided within link end definitions.

JointJS also contains mechanisms to define one's own custom link anchor functions.

Built-in link anchors

connectionClosest()

The 'connectionclosest' link anchor function places the anchor of the link at the point along the reference link that is the closest to the appropriate reference point of this link. (If we are calling this method for a source anchor, the reference point is the first vertex; if there are no vertices, it is the target anchor. If we are calling this method for a target anchor, the reference point is the last vertex; if there are no vertices, it is the source anchor.)

Example:

link.source(link2, {
    linkAnchor: {
        name: 'connectionclosest'
    }
});

connectionLength()

The 'connectionLength' link anchor function places the anchor of the link at a point a specified length along reference link (counting from reference link's source). It accepts one argument, which can be passed within the linkAnchor.args property:

length	number	The length at which to place the target anchor. Default is 20, meaning a point 20 pixels from the source of the reference link.

Example:

link.source(link2, {
    linkAnchor: {
        name: 'connectionLength',
        args: {
            ratio: 50
        }
    }
});

connectionPerpendicular()

The 'connectionPerpendicular' link anchor function tries to place the anchor of the link inside the view bbox so that the link is made orthogonal. The anchor is placed along two line segments inside the view bbox (between the centers of the top and bottom side and between the centers of the left and right sides). If it is not possible to place the link anchor so that the resulting link would be orthogonal, the anchor is placed at the point on the reference link that is the closest to the appropriate reference point on this link. (If we are calling this method for a source anchor, the reference point is the first vertex; if there are no vertices, it is the target anchor. If we are calling this method for a target anchor, the reference point is the last vertex; if there are no vertices, it is the source anchor.)

Example:

link.source(link2, {
    anchor: {
        name: 'connectionPerpendicular'
    }
});

When the link has no vertices, the other end cell's center is used as a reference point. By default, this means that a link using the 'connectionPerpendicular' anchor slides alongside the source reference link while pointing to target's center. To invert this behavior, and have the link slide alongside the target reference link while pointing to source's center, pass a priority option to the target function:

link.target(link2, {
    priority: true,
    anchor: {
        name: 'connectionPerpendicular',
    }
});

connectionRatio()

The 'connectionRatio' link anchor function places the anchor of the link at a point at a specified ratio of the reference link's length (from reference link's source). It accepts one argument, which can be passed within the linkAnchor.args property:

ratio	number	The length ratio of the target anchor. Default is 0.5, meaning the midpoint of the reference link.

Example:

link.source(link2, {
    linkAnchor: {
        name: 'connectionRatio',
        args: {
            ratio: 0.25
        }
    }
});