How to avoid link crossing node?

GoJS
1

I’m using gojs 2.1.9, and LayeredDigraphLayout have any option to avoid link go thought the node like a image below ?

I’m already using routing: go.Link.AvoidsNodes but it doesnt work.

here is my link setting.

image
image791×417 18.3 KB

image

Tks for help

2

What is your LayeredDigraphLayout?

The route of the green link makes no sense to me. Perhaps some nodes are actually larger than they appear to be. Could you please set Node.background to “cyan”, temporarily, and show us the screenshot?

3

Hi walter this is my LayeredDigraphLayout

image
image696×293 15.2 KB

For a route of the green link, It have a rectangle wrapped the triangle inside with transparent stroke so you cant see, I already fill it with cyan in the sceenshot below.

image
image567×525 20.1 KB

4

So this.boxesAndArrowMode is true?
Are you setting or binding Link.fromSpot or toSpot?

5

Yes, Im binding fromSpot and toSpot, this.boxesAndArrows mode in this case is true, so setsPortSpots value is false.

6

I can reproduce the problem. Here’s what I’m using:

  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout:
            $(go.LayeredDigraphLayout,
              { direction: 90, columnSpacing: 10, setsPortSpots: false })
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { width: 100, height: 50 },
        $(go.Shape,
          { fill: "lightblue" }),
        $(go.TextBlock,
          { margin: 8 },
          new go.Binding("text"))
      );

    myDiagram.linkTemplate =
      $(go.Link,
        { routing: go.Link.AvoidsNodes, corner: 5 },
        { fromSpot: go.Spot.Bottom, toSpot: go.Spot.Top },
        new go.Binding("fromSpot", "fromSpot", go.Spot.parse),
        new go.Binding("toSpot", "toSpot", go.Spot.parse),
        $(go.Shape),
        $(go.Shape, { toArrow: "Standard", scale: 0.75})
      );

    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "C", text: "C" },
      { key: "D", text: "D" },
      { key: "21", text: "21" },
      { key: "G", text: "G" },
      { key: "E", text: "E" },
      { key: "F", text: "F" },
      { key: "22", text: "22" },
      { key: "B", text: "B" },
      { key: "A", text: "A" },
      { key: "J", text: "J" },
    ],
    [
      { from: "C", to: "21" },
      { from: "D", to: "21" },
      { from: "21", to: "G" },
      { from: "21", to: "E", fromSpot: "1 0.5", toSpot: "1 0.5" },
      { from: "E", to: "22" },
      { from: "F", to: "22" },
      { from: "22", to: "B" },
      { from: "22", to: "A" },
      { from: "E", to: "21", fromSpot: "0 0.5", toSpot: "0 0.5" },
      { from: "22", to: "21", fromSpot: "0 1", toSpot: "0 1" },
      { from: "21", to: "22", fromSpot: "1 0.5", toSpot: "1 1" },
    ]);

    myDiagram.selectCollection(myDiagram.findNodeForKey("22").findLinksTo(myDiagram.findNodeForKey("21")));
  }

The link from 22 to 21 is what is crossing over the 22, and I wonder if it has something to do with coming out (or going into) the corner.

Sorry, I don’t have a work-around at this moment. This may take some time to figure out.

1 Like
7

Yes, this is due to a bug in AvoidsNodes routing in some cases when the “to direction” is a multiple of 45 degrees but not a multiple of 90 degrees.

At least this case and some similar cases have been fixed for the next release, 2.1.50, which should be coming out soon. Although there may be some delays because we are in the midst of upgrading our web site. Sorry for the inconvenience.