link.label(index, properties, opt)
Set properties
on a label indexed by index
. A link can have multiple labels each having different position and attributes.
{
markup: <string>,
position: <number>,
attrs: { <selector>: <SVG attributes | JointJS attributes> }
}
Where position
is the position of the label with regard to the link .connection
SVG path.
It's supposed to be an object with distance
and offset
properties.
Where distance
defined as below.
distance
is in [0,1]
interval then the position of the label is considered to be defined as a percentage of the total length of the .connection
path.
E.g. distance 0.5
puts the label to the middle of the link.
distance
is >1
then the label will be put distance
pixels starting from the beginning of the .connection
path.
distance
is <0
puts the label Math.abs(distance)
pixels starting from the end of the .connection
path.
offset
defined as below.
offset
is defined as a number the position of the label is moved to the left (<0
) or to the right (>0
) perpendiculary in the direction of the path. offset
is defined as an object with x
and y
properties. It moves the label by x
and y
in the paper local coordinate system.
position
could be defined as a number that behaves as distance
defined above.
attrs
is again an object with CSS selectors as keys and SVG attributes as values. The default label markup is defined as follows:
<g class="label"><rect /><text /></g>
Where <rect>
is a box below the label.
link.label(0, {
position: .5,
attrs: {
rect: { fill: 'white' },
text: { fill: 'blue', text: 'my label' }
}
});
Note that all labels are stored in an array on the link model under the attribute labels
.
link.prop('labels'); // returns an array of label properties