Now when we know how to style elements, let's have a look on how to style links. You might be surprised but
the way links are styled is exactly the same as with styling elements. Again, we need to know the SVG
structure of links and then use either external CSS or
the attr method of joint.dia.Link
(which is actually the
same as of joint.dia.Element
).
The SVG structure of links is the following:
<path class="connection"/>
<path class="marker-source"/>
<path class="marker-target"/>
<path class="connection-wrap"/>
<g class="labels" />
<g class="marker-vertices"/>
<g class="marker-arrowheads"/>
<g class="link-tools" />
Let's see an example:
link.attr({
'.connection': { stroke: 'blue' },
'.marker-source': { fill: 'red', d: 'M 10 0 L 0 5 L 10 10 z' },
'.marker-target': { fill: 'yellow', d: 'M 10 0 L 0 5 L 10 10 z' }
});
I left the styling of the other links in this example out of this text. If you want to look at it anyway, inspect this page, find the tutorial.js script and search the function linkStyling().
Setting vertices on a link is as simple as:
link.set('vertices', [{ x: 300, y: 60 }, { x: 400, y: 60 }, { x: 400, y: 20 }])
If you prefer the link to not be sharply broken at the vertices but instead interpolated by a curve,
set the smooth
attribute:
link.set('smooth', true)