Create Cyclic Link

GoJS
1

I would like to create a link something like this -

I am using LayeredDigraphLayout with setsPortSpots: false. Here is my data link array -

var linkDataArray = [
            { from: "1", to: "2", toText: "50%", toSpot: "Top" },
            { from: "2", to: "1", toText: "50%", fromSpot: "Top", toSpot: "Bottom" },
            { from: "2", to: "3", toText: "32%" },
            { from: "2", to: "4", toText: "32%" },
            { from: "2", to: "5", toText: "17%" }
        ];

With this, the arrows are displaying like a square. After spending some time I ended-up with this -

{ from: "1", to: "2", toText: "50%", toSpot: "0.3 0" },
{ from: "2", to: "1", toText: "50%", fromSpot: "Top", toSpot: "0.7 1" },

Resulting -

I am still struggling to make those lines straight. Could you please help me on this?

2

Instead of setting/binding the Link.toSpot and Link.fromSpot, I suggest that you just set the Node/port spot properties to be the appropriate “…Side” Spot values. That way you won’t need to keep those spot values in your link data.

If you are not using separate ports on each node (i.e. there is only one port per node), then the easiest would be to set:

    fromSpot: go.Spot.TopBottomSides,
    toSpot: go.Spot.TopBottomSides,
3

On an unrelated issue: if your graph is not tree-structured, I’m not sure it makes sense to use a “TreeExpanderButton”. I can’t tell if you are or not – I just wanted to caution you if you were.

If you are, perhaps you can set all the links that go “upward” to have Link.isTreeLink set or bound to false.

4

Thanks for the reply. I was on vacation, so couldn’t check it.

I tried using go.Spot.TopBottomSides but with this the graph is coming like this -

However, if I drag the first entity a bit, it comes fine -

Is this because of the layout? I am using LayeredDigraphLayout.

Regarding your note on the TreeExpanderButton, I was just playing with it, will not be using it with this graph. Thanks for mentioning it though :smile:

5

The problem is that LayeredDigraphLayout, even with setsPortSpots false, doesn’t know about the ports’ spots being Spot.TopBottomSides. So it thinks it has to route the links around so that links always should come out from the bottom and go into the top, even though in reality the port spot lets it choose the more direct routing (with either the top or the bottom, whichever is closer), which is what you wish.

One work-around for now is to set Layout.isRouting to false. But that might cause poor routing elsewhere for links that cross layers.

6

Thanks for the help. It is working fine for this scenario and I understand your point on the poor routing. With our current requirement, there won’t be such links but it is likely to come in the future. I will revisit this once I get enough time. Thanks for the heads up.

7

OK, we have added support for “…Sides” spots by LayeredDigraphLayout in version 1.6, which will be available in the next 1.6 beta build.

Thanks again for reminding us about a task that we have been wanting to do for a long time. I hope the results are satisfactory for your app when you do use it.