The following json is the options.
The green dot is from point,red dot is to point.
{ "class": "go.GraphLinksModel", "linkFromPortIdProperty": "fromPort", "linkToPortIdProperty": "toPort", "nodeDataArray": [ {"width":86,"height":86,"key":0,"loc":"0 150","text":"a","resource":{"id":"aaa","label":"aaaa"},"x":329,"y":209}, {"width":86,"height":86,"key":1,"text":"b","resource":{"nodeType":"branch"},"x":329,"y":375}, {"width":86,"height":86,"key":2,"text":"c","resource":{},"x":472,"y":541}, {"width":86,"height":86,"key":3,"text":"d","resource":{"nodeType":"branch"},"x":43,"y":707}, {"width":86,"height":86,"key":4,"text":"e","resource":{},"x":329,"y":707}, {"width":86,"height":86,"key":5,"text":"f","resource":{},"x":615,"y":707}, {"width":86,"height":86,"key":-1,"category":"Start","text":"Start","resource":{"label":"sss"},"x":329,"y":43}, {"width":86,"height":86,"key":-2,"category":"End","text":"Enjoy!","resource":{"label":"sss"},"x":329,"y":873} ], "linkDataArray": [ // {"from": -1, "to": -2, "fromPort":"B", "toPort":"T"} {"from": -1, "to": 0, "fromPort":"B", "toPort":"T"}, {"from": 0, "to": 1, "fromPort":"B", "toPort":"T"}, {"from": 1, "to": 2, "fromPort":"B", "toPort":"T"}, {"from": 1, "to": 3, "fromPort":"B", "toPort":"T"}, {"from": 3, "to": -2, "fromPort":"B", "toPort":"T"}, {"from": 2, "to": 4, "fromPort":"B", "toPort":"T"}, {"from": 2, "to": 5, "fromPort":"B", "toPort":"T"}, {"from": 4, "to": -2, "fromPort":"B", "toPort":"T"}, {"from": 5, "to": -2, "fromPort":"B", "toPort":"T"}, ]}
The linkTemplate:
myDiagram.linkTemplate = $(go.Link, // the whole link panel { zOrder: 1, selectable: false, routing: go.Link.AvoidsNodes, curve: go.Link.JumpOver, corner: 20, }, new go.Binding("points").makeTwoWay(), $(go.Shape, // the highlight shape, normally transparent { isPanelMain: true, strokeWidth: 8, stroke: "transparent", name: "HIGHLIGHT" }), $(go.Shape, // the link path shape { isPanelMain: true, stroke: "#becce0", strokeWidth: 2 }), $(go.Shape, // the arrowhead { toArrow: "standard", stroke: null, fill: "#becce0"}), $(go.Panel, "Auto", // the link label, normally not visible { visible: false, name: "LABEL", segmentIndex: 2, segmentFraction: 0.5}, new go.Binding("visible", "visible").makeTwoWay(), $(go.Shape, "RoundedRectangle", // the label shape { fill: "#F8F8F8", stroke: null }), $(go.TextBlock, "Yes", // the label { textAlign: "center", font: "10pt helvetica, arial, sans-serif", stroke: "#333333", editable: true }, new go.Binding("text").makeTwoWay()) ) );
I’m binding location for the nodes.
The lines are unaligned,and the under is ok.
This problem is uncontrollable.