Метки ссылок перекрываются между собой

Question

Я создал две квадратные формы и соединил их ссылками через их портыНо когда я создаю более двух ссылок, их ярлыки ссылок начинают перекрываться (вы можете увидеть это на скриншоте ниже).Есть ли у GoJS несколько вариантов правильного выравнивания или разделения меток?

Answer 1

Я думаю, что проблема может быть в том, что вы используете несколько портов.Предполагая, что порты расположены вдоль стороны узла, выбор места соединения с узлом невелик.

Вместо этого поведение по умолчанию для узла с одним портом может быть таким, как выищу:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv");

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        new go.Binding("location"),
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        //{ curve: go.Link.Bezier },
        $(go.Shape),
        $(go.Shape, { toArrow: "OpenTriangle" }),
        $(go.TextBlock, { background: "white" },
          new go.Binding("text"))
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue", location: new go.Point(0, 0) },
      { key: 2, text: "Beta", color: "orange", location: new go.Point(200, 50) },
      { key: 3, text: "Gamma", color: "lightgreen", location: new go.Point(50, 200) }
    ],
    [
      { from: 1, to: 2, text: "12" },
      { from: 1, to: 2, text: "a long label" },
      { from: 2, to: 1, text: "345" },
      { from: 1, to: 3, text: "13" },
      { from: 1, to: 3, text: "short" },
      { from: 3, to: 1, text: "34567890" }
    ]);
  }

производит:

Или если вы укажете ссылки кривой Безье:

Переместите узлы вокруг, и вы увидите, как расстояние между ссылками изменяется в зависимости от ширины меток ссылок, поскольку метки не круглые.