Sie können Ihr eigenes Markup für Links haben, genau wie für andere Elemente. Der mitgelieferte Markup-Code Link ist jedoch ziemlich komplex, verglichen mit dem Beispiel einer Rect. In joint.js:
joint.dia.Link = joint.dia.Cell.extend({
// The default markup for links.
markup: [
'<path class="connection" stroke="black" d="M 0 0 0 0"/>',
'<path class="marker-source" fill="black" stroke="black" d="M 0 0 0 0"/>',
'<path class="marker-target" fill="black" stroke="black" d="M 0 0 0 0"/>',
'<path class="connection-wrap" d="M 0 0 0 0"/>',
'<g class="labels"/>',
'<g class="marker-vertices"/>',
'<g class="marker-arrowheads"/>',
'<g class="link-tools"/>'
].join(''),
Wie Sie sehen können, ist, im Gegensatz zu einem Rect ein Link wirklich aus mehreren Objekten. Und das ist nur für die Link; Es gibt auch Markup für labels, vertices, usw., und Sie müssen diese möglicherweise berücksichtigen, abhängig von Ihren Anforderungen.
In meinem Fall, ich füge ein Tooltip --- HTML <title> Element --- Elemente. Für eine Rect einfach ich hartcodiert:
markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/><title/></g>'
aber für Link s gewählt ich gehen:
initialize: function()
{
// called from Backbone constructor
// call base initialize()
joint.dia.Link.prototype.initialize.apply(this, arguments);
// link markup is so complex that we need to fetch its definition
var markup = (this.markup || this.get('markup'));
// append <title> to markup, so that it covers whole path
markup += '<title/>';
this.set('markup', markup);
}
, dass Sie einen Start zumindest geben sollte.