JointJS同じソースとターゲットを持つリンク

Question

場合によっては、ソースとターゲットが同じ要素であるリンクがあります。 （同じID）。

this.lastLink = this.link.clone().set({ 
    source: {id: ele1Id}, 
    target: {id: ele2Id}, 
    ... 

現在、このようになっています。リンクにはラベルがありますので、混乱させないでください。 （LINK_TABLEはリンクラベルです）。

私は何を達成したいことは、ソースとターゲットが同じであるときはいつでも、リンクは次のようになりますということです。

私の最初の試みは、ターゲットの位置を取得し、その後、いくつかの値のためにそれをインクリメントすることでした。

var targetPositionX = ele2.attributes.position.x; 
    var targetPositionY = ele2.attributes.position.y; 

    source: {id: ele1Id}, 
    target: {x: targetPositionX+50, y:targetPositionY+50}, 
    ... 

しかし、目標位置を取得しようとしているときに問題が発生したため、試しても機能しませんでした。私がconsole.log（ele2）を使用して、位置を探すとうまくいくでしょう。しかし、console.log（ele2.attributes.position）とすれば何らかの理由で{x：0、y：0}をログに記録します。しかし、この質問には関係しません。

他に何を試すことができますか？

Answer 1

私は要素に2つのポートを追加することでこれを解決することができました。

var port = { 
    id: 'port2', 
    position:{ 
     name: 'right' 
    }, 
    markup: '<rect width="0" height="1"/>' 
    }; 
    var port2 = { 
    id: 'port1', 
    position:{ 
     name: 'right' 
    }, 
    markup: '<rect width="0" height="1"/>' 
    }; 
    ele1Id.addPort(port); 
    ele1Id.addPort(port2); 

リンクを追加した後、ソースとターゲットにポートを追加する必要がありました。

source: {id: ele1Id.id, port: "port1"}, 
target: {id: ele2Id.id, port: "port2"} 

そして、私はその「脊髄」リンクの一見のために加え、他の事はこれです：

connector: { name: 'rounded' }, 
router: { name: 'manhattan' } 

Answer 2

は、あなたがリンクに余分な頂点を追加することができます。インスピレーションのデモがあります：http://resources.jointjs.com/demos/fsa