Not creating gap between links

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


image2

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:
image

Then I draw a new link from the first “Circle” node in the second layer/column to the “Beta” node, and I get:
image

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:
image

(2) Or if I instead draw from the fourth “Circle” node to “Beta”, I get:
image

Here’s my code. Note that I have no idea of what link validation policies you want to implement. https://gojs.net/latest/intro/validation.html

  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:

  1. when I drag the link from 3rd point to 2nd node point(step1 from image)it should position like step2 from image. Now in step2 the image is positioning from bottom.
    scenario 2:
  2. when I drag the link from 1st point to 2nd node point, the link should position from top.

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.