Some expanded nodes are going to bad direction

GoJS
1

Hey
In force directed layout after expand tree, child nodes are going to center of screen (Plz see the pic, selected nodes are children)
They must go to oposite direction (Right of the parent node)
What should i do? Thanks

.

expand.png1004×618 63 KB

2

Would making use of TreeLayout make more sense for your use case than ForceDirectedLayout?

3

There is a sample with ForceDirectedLayout which works correctly, as i want. LINK

But what are differences between that sample and my code?

Code:

function DemoForceDirectedLayout() {
go.ForceDirectedLayout.call(this);
}
go.Diagram.inherit(DemoForceDirectedLayout, go.ForceDirectedLayout);
DemoForceDirectedLayout.prototype.makeNetwork = function (coll) {
var net = go.ForceDirectedLayout.prototype.makeNetwork.call(this, coll);
net.vertexes.each(function (vertex) {
var node = vertex.node;
if (node !== null) vertex.isFixed = node.isSelected;
});
return net;
};

$go(go.Diagram, ‘DiagramDiv’, // must be the ID or reference to div
{
scrollMode: go.Diagram.InfiniteScroll,
initialScale: 0.7,
initialAutoScale: go.Diagram.Uniform,
contentAlignment: go.Spot.Center, // start everything in the middle of the viewport
layout: new DemoForceDirectedLayout(), // use custom layout
});

$go(go.Node, ‘Spot’, {
isTreeExpanded: false,
contextMenu: ContextMenu,
//locationSpot: go.Spot.Center,
doubleClick: function (e, node) {
var cmd = myDiagram.commandHandler;
if (node.isTreeExpanded) {
if (!cmd.canCollapseTree(node)) return;
} else {
if (!cmd.canExpandTree(node)) return;
}
e.handled = true;
if (node.isTreeExpanded && node.data.type != “record”) {
cmd.collapseTree(node);
} else {
cmd.expandTree(node);
if (node.data.type == “entity”) {
var itr = node.findTreeChildrenNodes();
temp = itr;
while (itr.next())
cmd.expandTree(itr.value);
}
}
}
},
);

4

Your custom layout, DemoForceDirectedLayout, is explicitly not moving any of the selected Nodes. Since that is the only customization of the layout, if you really want selected Nodes to be laid out, perhaps you should not use this custom layout at all but just use a plain ForceDirectedLayout.

5

Problem was not solved.
In node template i wrote isTreeExpanded: false, when i change it to true, diagram draw currectly, But i want diagram trees be collapsed
sorry for my english :))

6

So even with a basic ForceDirectedLayout and no modifications, you get the results above? Do you have any sample data you can share with us to reproduce the results you are seeing?

7

I’m wondering if the nodes that are not seen because a node is collapsed are getting the default location of (0,0), so that when they are made seen by expanding, they start off far away from the node.

So I am speculating that you could implement a Node.treeExpandedChanged event handler that set the children nodes’ locations to the location of the parent node, if expanding and if the nodes have default locations.

8

Can you give me a sample to use Node.treeExpandedChanged please?

9

If you do a search, you’ll find the example usage in the TreeMapper sample.

Maybe something like:

$(go.Node, . . .,
  {
    treeExpandedChanged: function(node) {
      if (node.isTreeExpanded) {
        node.findTreeChildrenNodes().each(function(c) {
          if (!c.location.isReal()) {
            c.location = node.location;
          }
        });
      }
    }
  },
  ...)

Although this accomplishes what you are asking for, I’m finding that the animation is still shows the links routed from the old node location of (0,0). We’ll look into this.

10

The problem solved to some extent, but some nodes still have that problem
I sent my codes for you in P.M. Please check it thanks

11

I received a private message, but there was no link to any code.

Instead of sending private messages, please send email to GoJS at our nwoods.com domain.

14

That information doesn’t help me understand your situation at all.

One thing you could try is leave all nodes with Node.isTreeExpanded as true, as it is by default. Allow the normal ForceDirectedLayout to happen, and then collapse the graph. Something like:

$(go.Diagram, ....,
  {
    layout: $(go.ForceDirectedLayout),
    "InitialLayoutCompleted": function(e) {
      e.diagram.nodes.each(function(n) { n.isTreeExpanded = false; });
    }
  })
15

It’s not working. After all nodes collapsed, when the root node expanded some nodes not visible. See the result below

I prefer other solution, Not something like this
Previous solution was working sometimes

Often the nodes are bottom or right of the root node, doesn’t expanding correctly
Example:

I’ve sent an email to GoJS [at] nwoods.com (I hope it’s currect)

16

Yes, if the graph is not tree-structured, you cannot use Node.isTreeExpanded or “TreeExpanderButton” or any of the properties or methods with “tree” in their names. Your code makes a lot of use of those “tree” methods.

Instead you will need to decide how you want to “expand” and “collapse” nodes, because you cannot use what is built into GoJS for non-trees. There are several reasonable choices you could make for deciding when a node should disappear depending on the states of the nodes it is connected with.