Link arrowheads

Two special attributes are in charge of link arrowheads:

• sourceMarker - sets an arrowhead of requested SVGElement 'type' to the start of the link.
• targetMarker - sets an arrowhead of requested SVGElement 'type' to the end of the link.

The other properties passed in the marker object are expected to be SVG attributes for that SVGElement.

Usage

Link arrowhead special attributes expect an object with native SVG attributes. This means that they are not able to understand JointJS special attributes, and they cannot make use of JointJS's camelCase translation. In order to better communicate these restrictions to programmers, we strongly encourage the use of quotation marks around all arrowhead marker properties (i.e. 'type' and not type; 'stroke-width' and not strokeWidth).

The 'type' of the arrowhead can be any valid SVGElement type. The following example shows how to create a link with two simple <path> arrowheads.

The two arrowheads have the same path data commands, despite pointing in opposite directions; this is because all targetMarker values are automatically rotated by 180 degrees. The path commands' coordinate system has origin at the tip of the link and is rotated according to the slope of the link at that point. This means that you can design all your arrowheads as if they were pointing left and towards the point 0,0 in local coordinates, and then rely on JointJS's automatic arrowhead rotation.

Note that, in general, if the 'fill' and 'stroke' colors are not specified, they are adopted from the line.stroke attribute.

link.attr({
    line: {
        sourceMarker: { // hour hand
            'type': 'path',
            'd': 'M 20 -10 0 0 20 10 Z'
        },
        targetMarker: { // minute hand
            'type': 'path',
            'stroke': 'green',
            'stroke-width': 2
            'fill': 'yellow',
            'd': 'M 20 -10 0 0 20 10 Z'
        }
    }
});

Open Sandbox

To create an <image> arrowhead, you need to provide an URL with the path to your image to the 'href' property, and then specify the desired 'width' and 'height'. Keep in mind that both of your markers should reference images pointing left; the image for targetMarker will be automatically rotated by 180 degrees by JointJS, and then both markers will match the gradient of the link path. Remember to reposition the image in the 'y' axis (by -1/2 the value of 'height') if you need the arrowhead to be centered.

link.attr({
    line: {
        sourceMarker: {
            'type': 'image',
            'href': 'https://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png',
            'width': 24,
            'height': 24,
            'y': -12
        },
        targetMarker: {
            'type': 'image',
            'href': 'https://cdn3.iconfinder.com/data/icons/49handdrawing/24x24/left.png',
            'width': 24,
            'height': 24,
            'y': -12
        }
    }
});

Open Sandbox

To create an arrowhead of arbitrary SVGElement type, simply specify the 'type' appropriately, and then provide native SVG attributes to style it. Keep in mind that 'circle' and 'ellipse' SVG elements have origin in their center; they need to be repositioned with the 'cx' attribute (by the value of 'r') if you do not want them to overflow the end of the link.

link.attr({
    line: {
        sourceMarker: {
            'type': 'rect',
            'width': 50,
            'height': 10,
            'y': -5,
            'fill': 'rgba(255,0,0,0.3)',
            'stroke': 'black'
        },
        targetMarker: {
            'type': 'circle',
            'r': 10,
            'cx': 10,
            'fill': 'rgba(0,255,0,0.3)',
            'stroke': 'black'
        }
    }
});

Open Sandbox