Hi,
I am facing issue with overlapping of links on nodes below image is reference of gojs generated digaram
and i need the diagram to be like below image
My code
this.diagram.initialContentAlignment = go.Spot.Center;
this.diagram.nodeTemplate = this.myGoMaker(
go.Node, "Vertical",
this.myGoMaker(go.Picture,
{ maxSize: new go.Size(30, 30) },
new go.Binding("source", "img")),
this.myGoMaker(go.TextBlock, { text: "textAlign: 'center'", textAlign: "center", overflow: go.TextBlock.OverflowEllipsis, maxLines: 1, width: 150, margin: 8, isMultiline: false },
new go.Binding("text", "name")),
{
toolTip: // define a tooltip for each node that displays the color as text
this.myGoMaker("ToolTip",
this.myGoMaker(go.TextBlock, { margin: 4 },
new go.Binding("text", "name"))
) // end of Adornment
}
);
this.diagram.linkTemplate =
this.myGoMaker(go.Link,
{ routing: go.Link.Orthogonal, corner: 10 },
this.myGoMaker(go.Shape, { strokeWidth: 2 }),
this.myGoMaker(go.Shape, { toArrow: "OpenTriangle" })
);
this.diagram.groupTemplate = this.myGoMaker(
go.Group, "Auto",
{ // define the group's internal layout
layout: this.myGoMaker(go.TreeLayout,
{ angle: 0, arrangement: go.TreeLayout.ArrangementVertical, isRealtime: true }),
// the group begins unexpanded;
// upon expansion, a Diagram Listener will generate contents for the group
isSubGraphExpanded: true,
// when a group is expanded, if it contains no parts, generate a subGraph inside of it
subGraphExpandedChanged: function (group) {
if (group.memberParts.count === 0) {
// randomGroup(group.data.key);
}
}
},
this.myGoMaker(go.Shape, "RoundedRectangle",
{ fill: null, stroke: "lightgray", strokeWidth: 2 }),
this.myGoMaker(go.Panel, "Vertical",
{ defaultAlignment: go.Spot.Left, margin: 4 },
this.myGoMaker(go.Panel, "Horizontal",
{ defaultAlignment: go.Spot.Top },
// the SubGraphExpanderButton is a panel that functions as a button to expand or collapse the subGraph
this.myGoMaker("SubGraphExpanderButton",
{ alignment: go.Spot.Right, margin: 5, "ButtonIcon.stroke": "blue", }),
this.myGoMaker(go.TextBlock,
{ font: "Bold 14px Sans-Serif", margin: 4 },
new go.Binding("text", "name"))
),
// create a placeholder to represent the area where the contents of the group are
this.myGoMaker(go.Placeholder,
{ padding: new go.Margin(0, 10) })
) // end Vertical Panel
);
this.diagram.model = new go.GraphLinksModel([
{
"key": 0,
"name": "Published",
"group": -1,
"color": "white",
"isGroup": true,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 491
},
{
"key": 1,
"name": "Source",
"group": 0,
"color": "white",
"isGroup": true,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 492
},
{
"key": 2,
"name": "OE",
"group": 1,
"color": "white",
"isGroup": true,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 493
},
{
"key": 3,
"name": "ACTION_TABLE",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 494
},
{
"key": 4,
"name": "CATEGORIES_TAB",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 495
},
{
"key": 5,
"name": "CUSTOMERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 496
},
{
"key": 6,
"name": "INVENTORIES",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 497
},
{
"key": 7,
"name": "LINEITEM_TABLE",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 498
},
{
"key": 8,
"name": "ORDERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 499
},
{
"key": 9,
"name": "ORDER_ITEMS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 500
},
{
"key": 10,
"name": "PRODUCT_DESCRIPTIONS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 501
},
{
"key": 11,
"name": "PRODUCT_INFORMATION",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 502
},
{
"key": 12,
"name": "PRODUCT_REF_LIST_NESTEDTAB",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 503
},
{
"key": 13,
"name": "PROMOTIONS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 504
},
{
"key": 14,
"name": "PURCHASEORDER",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 505
},
{
"key": 15,
"name": "SUBCATEGORY_REF_LIST_NESTEDTAB",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 506
},
{
"key": 16,
"name": "WAREHOUSES",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 507
},
{
"key": 17,
"name": "ACCOUNT_MANAGERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 508
},
{
"key": 18,
"name": "BOMBAY_INVENTORY",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 509
},
{
"key": 19,
"name": "CUSTOMERS_VIEW",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 510
},
{
"key": 20,
"name": "OC_CORPORATE_CUSTOMERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 511
},
{
"key": 21,
"name": "OC_CUSTOMERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 512
},
{
"key": 22,
"name": "OC_INVENTORIES",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 513
},
{
"key": 23,
"name": "OC_ORDERS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 514
},
{
"key": 24,
"name": "OC_PRODUCT_INFORMATION",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 515
},
{
"key": 25,
"name": "ORDERS_VIEW",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 516
},
{
"key": 26,
"name": "PRODUCTS",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 517
},
{
"key": 27,
"name": "PRODUCT_PRICES",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 518
},
{
"key": 28,
"name": "SYDNEY_INVENTORY",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 519
},
{
"key": 29,
"name": "TORONTO_INVENTORY",
"group": 2,
"color": "white",
"isGroup": false,
"img": "assets/images/icons/Capture1.PNG",
"__gohashid": 520
}
], [
{
"from": 5,
"to": 17,
"__gohashid": 523
},
{
"from": 5,
"to": 20,
"__gohashid": 524
},
{
"from": 5,
"to": 21,
"__gohashid": 525
},
{
"from": 5,
"to": 19,
"__gohashid": 526
},
{
"from": 6,
"to": 28,
"__gohashid": 527
},
{
"from": 6,
"to": 22,
"__gohashid": 528
},
{
"from": 6,
"to": 18,
"__gohashid": 529
},
{
"from": 6,
"to": 29,
"__gohashid": 530
},
{
"from": 8,
"to": 25,
"__gohashid": 531
},
{
"from": 8,
"to": 20,
"__gohashid": 532
},
{
"from": 8,
"to": 21,
"__gohashid": 533
},
{
"from": 8,
"to": 23,
"__gohashid": 534
},
{
"from": 9,
"to": 23,
"__gohashid": 535
},
{
"from": 9,
"to": 20,
"__gohashid": 536
},
{
"from": 9,
"to": 21,
"__gohashid": 537
},
{
"from": 10,
"to": 26,
"__gohashid": 538
},
{
"from": 11,
"to": 26,
"__gohashid": 539
},
{
"from": 11,
"to": 24,
"__gohashid": 540
},
{
"from": 11,
"to": 27,
"__gohashid": 541
},
{
"from": 16,
"to": 22,
"__gohashid": 542
},
{
"from": 22,
"to": 24,
"__gohashid": 543
},
{
"from": 26,
"to": 29,
"__gohashid": 544
},
{
"from": 26,
"to": 18,
"__gohashid": 545
},
{
"from": 26,
"to": 28,
"__gohashid": 546
}
]);