Arrows allignment

GoJS
1

I am trying to create diagram which has groups and lines going through groups. I have tried all options of link templetes but not able to get anything working which will give proper layout for links without overlaps. As you see in screenshot the Inner Group A and B have lines going through and difficult to figure out how the connections are. Is it possible to have links shown outside the group boxes so it will be clear to see?

overlap.jpg1093×536 40.6 KB

below is what I am using:
myDiagram =
(go.Diagram, "myDiagramDiv", // must be the ID or reference to div { initialAutoScale: go.Diagram.UniformToFill, layout: (go.LayeredDigraphLayout)
// other Layout properties are set by the layout function, defined below
});

myDiagram.linkTemplate =
    $(go.Link,
    new go.Binding("routing", "routing"),
      $(go.Shape, { strokeWidth: 2 }),
      $(go.Shape, { toArrow: "Standard" }),
      {
        selectionAdornmentTemplate:
          $(go.Adornment,
            $(go.Shape,
              { isPanelMain: true, stroke: "#e01a0f",fill: "#e01a0f", strokeWidth: 3 }),
            $(go.Shape,
              { toArrow: "Standard", fill: "#e01a0f", stroke: null, scale: 2.5 })
          )  // end Adornment
      }
    );
2

I haven’t tried this, but I think you want to remove the binding of Link.routing, set Link.routing to go.Link.AvoidsNodes, and set Group.avoidable to false on all your Groups.

3

I changed my link template as below:
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes },
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, { toArrow: “Standard” }),
{
selectionAdornmentTemplate:
$(go.Adornment,
$(go.Shape,
{ isPanelMain: true, stroke: “#e01a0f”,fill: “#e01a0f”, strokeWidth: 3 }),
$(go.Shape,
{ toArrow: “Standard”, fill: “#e01a0f”, stroke: null, scale: 2.5 })
) // end Adornment
}
);

and all my groups added property “avoidable: false,”

but that did not have any change in diagram the arrows are still overlapping.

4

Maybe you also need to set:

 { fromSpot: go.Spot.LeftRightSides, toSpot: go.Spot.LeftRightSides },

on your Nodes.

5

I did try that earlier but that too does not create spacing between vertical lines. Please see below image. I did try the linkspacing property as well but that is working on horizontal links only.
Is there a way for me to send my current complete code file?

retry.jpg1097×514 43.4 KB

6

“AvoidsNodes” routing does not also try to “avoid links”, so overlapping link segments cannot be prevented.

However, you could try setting Link.fromEndSegmentLength and/or Link.toEndSegmentLength on individual Links in order to cause them to turn farther away from the node. Or override Link.computeEndSegmentLength.