Connectors take an array of link route points and generate SVG path commands so that the link can be rendered. The connector
property of a link can be accessed with the link.connector()
function.
There are four built-in connectors in JointJS:
'jumpover'
- connector with bridges over link intersections'normal'
- default simple connector'rounded'
- connector with rounded edges'smooth'
- connector interpolated as a bezier curveExample:
link.connector('rounded', {
radius: 20
});
The default connector is 'normal'
; this can be changed with the defaultConnector
paper option. Example:
paper.options.defaultConnector = {
name: 'rounded',
args: {
radius: 20
}
}
All four of the built-in connectors accept the following optional argument, in addition to their own arguments:
raw | boolean | Should the router return the connection path as a g.Path rather than as a string? Default is false . |
---|
Example:
link.connector('normal', {
raw: true
});
JointJS also contains mechanisms to define one's own custom connectors.
Note that the modular architecture of JointJS allows mixing-and-matching connectors with routers as desired; for example, a link may be specified to use the 'jumpover'
connector on top of the 'manhattan'
router:
var link = new joint.shapes.standard.Link();
link.source(rect);
link.target(rect2);
link.router('manhattan');
link.connector('jumpover');