What should I set to make the same port links don't overlap?

GoJS
#1

Hi all,
I want the same port links don’t overlap like below:

image.png747×185 18.8 KB

But I don’t know what to set, and actually my code is get overlap links like below sample:

And it did not show all the links until I dragged it.

So what link attributes should I set to achieve the effect of my first map?

This is my sample code:

function init() {
    if (window.goSamples) goSamples();          // init for these samples -- you don't need to call this
    var $ = go.GraphObject.make;                // for conciseness in defining templates
    myDiagram =
        $(go.Diagram, "myDiagramDiv");

    // define the Node template
    myDiagram.nodeTemplate =
        $(go.Node, "Auto",
        $(go.Shape, { fill: "red", stroke:"white" }),
            $(go.TextBlock, { margin: 50 },
                new go.Binding("text"))
        );

    // define the Link template
    myDiagram.linkTemplate =
        //this AvoidsNodes is invaild when I append nodes/links like that
        $(go.Link, go.Link.AvoidsNodes,
            { corner: 5 },
            $(go.Shape, {strokeWidth: 4},
                new go.Binding("stroke", "color")
            ));  // the link shape

    myDiagram.model = $(go.GraphLinksModel);
    myDiagram.model.nodeDataArray = [
        { key: 1, group: 66, text: "1" },
        { key: 2, group: 66, text: "2" },
        { key: 66, isGroup: true, group: 88 },
        { key: 88, isGroup: true }];
    myDiagram.model.linkDataArray = [
        { from: 1, to: 2, color: "black" },
        { from: 1, to: 2, color: "blue" },
        { from: 1, to: 2, color: "red" }
    ];

    myDiagram.groupTemplate = $(go.Group, "Auto",
        {
            layout: go.GraphObject.make(go.TreeLayout,
                { arrangement: go.TreeLayout.ArrangementVertical, layerSpacing: 100 },
            ),
            isSubGraphExpanded: true,
            //avoidable for group is false
            avoidable: false
        },
        go.GraphObject.make(go.Shape, "Rectangle",
            { fill: null, stroke: "gray", strokeWidth: 2 }),
        go.GraphObject.make(go.Panel, "Vertical",
            { defaultAlignment: go.Spot.Left, margin: 30 },
            go.GraphObject.make(go.Panel, "Horizontal",
                { defaultAlignment: go.Spot.Top },
                // the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
                go.GraphObject.make("SubGraphExpanderButton"),
                go.GraphObject.make(go.TextBlock,
                    { font: "Bold 18px Sans-Serif", margin: 4 }
                ),
                // create a placeholder to represent the area where the contents of the group are
                go.GraphObject.make(go.Placeholder,
                    { padding: new go.Margin(10, 30) })
            )
        ));

}

Thanks,
Peter

#2

If you turn off AvoidsNodes routing, you’ll be more likely to get multiple routes between the same pair of ports. (AvoidsNodes routing always chooses a shortest path, so your example could not happen.)

But even then I’m not sure that you’ll get different routes in the way that you want. You might have to customize the routing yourself, by overriding Link.computePoints, which is a tedious and complex task.

#3

Overriding Link.computePoints is not really convenient, so I thought of making a simple change from the perspective of the layout, I set nodeIndent: 10,nodeIndentPastParent:1, although the layout between the node becomes a bit strange, still better than before. Thanks for your help!