2

在某些情况下，我有源和目标是相同元素的链接。（相同的 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} 出于某种原因。但这与这个问题无关。

那我还能尝试什么？

4

2 回答 2

0

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

  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' }
于 2017-07-05T10:02:47.030 回答
0

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

于 2017-07-18T07:57:50.910 回答