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');