具有相同源和目标的 JointJS Link

Question

在某些情况下，我有 links，其中源和目标是相同的元素。（相同的 ID）。

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

目前看起来是这样的。链接有标签，所以不要混淆。（LINK_TABLE 是一个 link 标签）。

我想要实现的是，只要源和目标相同，link 应该看起来像这样。

我最初的尝试是获取目标的位置，然后将其递增某个值。

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

添加 links 后，我必须确保我也将端口添加到我的源和目标。

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

我为此添加的另一件事 'spinal' link 看起来是这样的：

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

Answer 2

您可以向 link 添加一个额外的顶点。有一个演示的灵感：http://resources.jointjs.com/demos/fsa

具有相同源和目标的 JointJS Link

JointJS Link with same source and target

javascript

jointjs

rappid