Tree Layout - Links Stands separate

GoJS
#1

Hi,
After InitialLayoutCompleted, I have to expand only one tree root. And also I had customised expand and collapse button.

InitialLayoutCompleted: (e) => {
  e.diagram.nodes.each(function(r) { r.data['isRg']? collapseDefault(r) : '' });
},
function collapseDefault(node){
      myDiagram.startTransaction('CollapseExpandTree');
      var children = node.findTreeChildrenNodes();
      children.each(function (c) {

        c.visible = false;
        c.collapseTree();
        
      });
      myDiagram.commitTransaction('CollapseExpandTree');
}

But diagram appears as follow :

image
image808×328 13.2 KB

After Expanding second root node , diagram have corrected.
image
image1238×337 32.8 KB

Could you please help me out this, Why this was happening and to correct it?

#2

Your code seems to be operating on all of the nodes, so the order in which you operate on them will affect the results. And it’s very inefficient too. And you should never perform a transaction in the body of a loop.

Why not only operate only on root nodes? Call Diagram.findTreeRoots.

In fact, why not set it up so that by default everything is collapsed?

#3

I want to expand 1st root only by default…

#4

Yes, if everything starts off collapsed, then your “InitialLayoutCompleted” listener would only need to expand the one you care about.

#5

Yes, I have iterated through nodes and take that 2nd node which is r.data[‘isRg’] and for that only I have applied CollapseTree().…
Can you please give me what should I do??

#6

I was suggesting that you adjust your templates so that everything starts off collapsed. The only code you would need to write would be find and expand the one root node that you care about.

#7

I have tried. Please suggest me some code. I am stuck on it

#8

In your node template, set Node.isTreeExpanded to false. This will cause everything to be collapsed. Then you only need to expand a particular tree.

Is that Node.isTreeExpanded property data bound in your node template? If so, then all you need to do is set it source data property to true on the node data object of the root node that you want to be expanded.

If that property is not data bound, then do something like:

var root = myDiagram.findNodeForKey(...);
if (root) root.expandTree();