Below two screen shots in that I want to show the nodes and links as shown in image1, but now according to image2 when I link to another node, it is merging inside the main node and not positioned properly, is there any functions to show like image1. Kindly guide me.
image1
Are you deleting that small circular node? Don’t delete it – keep it and change its appearance so that it has zero size.
not deleted the small circular node, just dragging the link to map to another node, that time it is merging to parent node
Are you saying that the small circular gray node still exists and is positioned at and behind the pink “splitGlobal 1” node? I do not understand how that could be happening if the TreeLayout is still being performed.
Yes your correct. I too don’t know how it is going behind.
what will be the reason for the link going beyond. any idea?
When I run the code I gave you in Cannot position node link - GoJS - Northwoods Software (nwoods.com) and modify the link template to use AvoidsNodes Link.routing and modify the node templates to support user-drawn links by setting fromLinkable and toLinkable to true on the port objects, I start with:
Then I draw a new link from the first “Circle” node in the second layer/column to the “Beta” node, and I get:
Some more experiments:
(1) If I draw a new link from the second “Circle” node in the second layer to the third one, I get:
(2) Or if I instead draw from the fourth “Circle” node to “Beta”, I get:
Here’s my code. Note that I have no idea of what link validation policies you want to implement. GoJS Validation -- Northwoods Software
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout, {
setsPortSpot: false,
setsChildPortSpot: false,
assignTreeVertexValues: function(v) {
if (v.node && v.node.category === "Big") v.layerSpacing = 25;
}
}),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplateMap.add("Little",
$(go.Node, "Vertical",
{ locationSpot: go.Spot.Center, locationObjectName: "ICON" },
$(go.Shape,
{ name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
portId: "", fromSpot: go.Spot.Right, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true }),
$(go.TextBlock,
{ margin: 2 },
new go.Binding("text"))
));
myDiagram.nodeTemplateMap.add("Big",
$(go.Node, "Spot",
{ locationSpot: go.Spot.Center, locationObjectName: "ICON" },
$(go.Shape, "RoundedRectangle",
{ fill: "dodgerblue", strokeWidth: 0, width: 120, height: 120 }),
$(go.Panel, "Vertical",
{ alignment: new go.Spot(0.5, 0, 0, 50) },
$(go.Shape,
{ name: "ICON", fill: "greenyellow", strokeWidth: 0, width: 40, height: 40,
portId: "", fromSpot: new go.Spot(1, 0.5, 40, 0), toSpot: new go.Spot(0, 0.5, -40, 0),
fromLinkable: true, toLinkable: true }),
$(go.TextBlock,
{ margin: 2, stroke: "white" },
new go.Binding("text"))
)
));
myDiagram.nodeTemplateMap.add("Circle",
$(go.Node,
{ locationSpot: go.Spot.Center, fromSpot: go.Spot.Right, toSpot: go.Spot.Left,
fromLinkable: true, toLinkable: true },
$(go.Shape, "Circle",
{ width: 16, height: 16, fill: "transparent", stroke: "lightgray", strokeWidth: 3 })
));
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 10 },
$(go.Shape, { stroke: "lightgray", strokeWidth: 3 })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", category: "Little" },
{ key: 2, text: "Beta", category: "Big" },
{ key: 3, text: "Gamma", category: "Circle" },
{ key: 4, text: "Delta", category: "Circle" },
{ key: 5, text: "Epsilon", category: "Circle" },
{ key: 6, text: "Zeta", category: "Circle" },
{ key: 7, text: "Eta", category: "Circle" }
],
[
{ from: 1, to: 2 },
{ from: 1, to: 3 },
{ from: 1, to: 4 },
{ from: 1, to: 5 },
{ from: 1, to: 6 },
{ from: 2, to: 7 }
]);
}
As i required to show the link validation as shown in below image,
scenario 1:
Is there any ways to do that?
Try removing the toSpot assignment(s).
I think the problem is that the graph is no longer tree-structured, so TreeLayout isn’t doing what you want. Try adding this event handler to your “Big” node template:
{
linkConnected: function(node, link, port) {
if (link.toNode === node && node.findLinksInto().count > 1) {
link.isTreeLink = false;
link.isLayoutPositioned = false;
}
}
},
When a link is connected with an instance of such a node, if there already is a link coming into that node, then clearly the graph will no longer be tree-structured. So it declares that that link not be considered part of the tree structure, both for “tree” operations and for TreeLayout.