JointJS Links：カスタムマークアップ？

Question

だから、私はJointJSを使用してERDツールを作成しようとしているとマークアップとカスタムリンクを作成したいと思います

<path><rect><path> 

のようなものは、アイデアは私が知っている、リンクの真ん中にひし形を持つことです私は要素と2つのリンクを使ってこれを行うことができますが、実際にはリンクにカスタムマークアップを付けたいと思っています。これはできますか？もしそうなら、どうですか？

Answer 1

他の要素と同様に、リンクに独自のマークアップを付けることができます。しかし、のマークアップコードは、例えばRectと比べてかなり複雑です。 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(''), 

、RectLinkとは異なり、実際にいくつかのオブジェクトで構成されています。それはちょうどLinkです。 labels、verticesなどのマークアップもあり、要件に応じて考慮する必要があります。

私の場合、私はツールチップ--- HTML <title>要素---を要素に追加しています。 Rectのために私は単純にハードコードされた：

markup: '<g class="rotatable"><g class="scalable"><rect/></g><text/><title/></g>' 

が、私はのために行くことを選択したLinkのため：

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

少なくともあなたのスタートを与える必要があります。