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

@CL.Peter wrote:

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

image.png747x185 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

Posts: 1

Participants: 1

Read full topic