The 'anchor' places the connection point so that it coincides with the link end's anchor point (determined either by the anchor function or by the defaultAnchor paper option). The position of the connection point may be modified by several additional arguments, which may be passed within the connectionPoint.args property:

offset number | object An object with x and y properties. The connection point will be moved:
  • from the anchor point by x pixels in the direction of the corresponding link end's path segment.
  • by y pixels in the direction of the corresponding link end's path segment, rotated by 90 degrees anti-clockwise around the anchor point.
If a number is provided, it will be used as the x offset.
align 'top' | 'left' | 'bottom' | 'right' Offset the connection point to the point given by projecting the first vertex onto the vector which points from the anchor point in the direction specified. (If there are no vertices, use the projection of the other anchor point instead.) Notably, if the reference point is not the direction-most point of the two, the connection point is set to be the same as the anchor point. Let us illustrate that outcome and the other possible outcome on the `'top'` direction:
  • The reference point lies below the anchor point. The anchor point is the topmost point of the two, so the connection point receives both the `x` and `y` coordinates from the anchor point. The connection point is set to be coincident with the anchor point.
  • The reference point lies above the anchor point. In this case, the reference point is the topmost point of the two, so the connection point receives the `y` coordinate from the reference point. The connection point still receives the `x` coordinate from the anchor point. This means that the connection point is offset from the anchor point in the `'top'` direction. The three points create a right-angled triangle, with the right angle at the connection point.
alignOffset number After having determined the position of the connection point according to the `align` algorithm (see above), additionally offset the connection point by the specified amount in the direction specified by `align`.

Example:

link.source(model, {
    connectionPoint: {
        name: 'anchor',
        args: {
            offset: 10
        }
    }
});