具有相同来源和目标的JointJS Link

Question

在某些情况下，我有链接，其中source和target是相同的元素。 （同一个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

我设法通过在我的元素中添加两个端口来解决这个问题。

  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