Changing Layouts dynamically

GoJS
#1

Hi,

I am changing my layouts dynamically within transactions.
But my problem is when I change the layout from Circular to ForcedDirectedLayout or from LayeredDigraphLayout to ForcedDirectedLayout, all the nodes do no rearrange from the top or the nodes do not get distributed, instead they rearrange closer to the existing position only.

I have tried arrangesToOrigin, but no luck.

Thanks
MIthun

#2

That is how force-directed layout is supposed to work. Nodes start at their current locations, and then various forces are computed on each one.

#3

Is there any way for us to rearrange the nodes randomly? While changing the layout from circular or layered?

#4

It seems odd to me that someone would want to randomize the positions when the nodes are already laid out in a reasonable fashion. There must be something specific that you are looking for. Could you please describe it?

#5

In our app, we give the option to changes the layout for our users.

Initially, we load all our nodes using ForcedDirectedLayout, while will render all the nodes uniformly.
Once the user changes the layout to Circular, goJs renders nicely all the nodes in circular layout.

Now, if the user changes his mind and wants to see the nodes like how he did before, changing the layout from circular to forcedDirectedLayout is not helping. So, I was wondering other than saving the location of each node for each layout, is there anything I can try which goJs provides?

Thanks

#6

I suppose before a ForceDirectedLayout you could set the location of each node to (0,0).
Also you will want to set https://gojs.net/latest/api/symbols/ForceDirectedLayout.html#randomNumberGenerator to null.

#7

How can I change the location of each node to (0,0) dynamically?
Just before setting the layout of my diagram.

goJsDiagram.nodes.each(function(node){
 node.location.x = 0;
 node.location.y = 0;
});

and

    goJsDiagram.nodes.each(function(node){
          node.data.viewData = "0 0";
   });

I have also tried making changes to nodeDataArray

goJsDiagram.model.nodeDataArray.forEach(function(model){
      model.viewData = null;
});

But, none of these seem to set the location of each node to null.
Is there anything I am missing?

Thanks in advance.

Mithun

#8

If you were using go-debug.js you would have gotten errors trying to execute n.location.x = 0;.

Do this instead: n.location = new go.Point(0, 0);. And execute the whole loop within a single transaction.

If you want to modify the model data, you cannot do what you did. Do myDiagram.model.set(n.data, "loc", "0 0"); and execute the whole loop within a transaction. Please read https://gojs.net/latest/learn/graphObject.html and https://gojs.net/latest/intro/dataBinding.html#ChangingDataValues.

#9

Thank you! It worked!

#10

This worked.

But there is one issue, where I change my layout from Layered, all the links will get a curve like the below pic.

image

When I change the layout now to Circular,
the links are still curvy and my layout is messy. Please see the below pic :
image

This does not happen when I change my ForcedDirectedLayout to Circular.

How to fix this?

PS : The second image is a part of circular layout, the curves in the links are making the layout look bad.

#11

To be precise, there is no curve in any of those links. Nothing has set Link.curve. Those link segments are all straight.

Ah, CircularLayout does not have a property like ForceDirectedLayout.setPortSpots or LayeredDigraphLayout.setPortSpots, but it probably should.

You’ll need to set Link.fromSpot and Link.toSpot on each Link to go.Spot.Default.