How can I let each node in Groups to generate a tree on its own

[goLuo]

How can I use DoubleTree Layout with Groups

Hi, I’m trying to implement the DoubleTree layout example in my project. It works great for nodes but I am trying to get it working for groups also. When I don’t use group: [image] I want the diagram to look like this when I introduce Gruops [image] But It doesn’t work.If I just changed the data, removing the field “parents” from the data and using “groups” instead, it would even break the layout and not show groups.

In the previous topic, I asked how to use DoubleTree Layout with Groups, and was told that I could create a tree with a GraphLinksModel, which also worked well.But now, there’s a new question that puzzles me.

    var model = [
        { key: "Root", color: lavgrad },
        { key: "1", parent: "Root", dir: "left", color: bluegrad },
        { key: "2", parent: "Root", dir: "left" },
        { key: "3", parent: "Root", dir: "left" },
        { key: "4", parent: "Root", dir: "left", color: bluegrad ,
          alignment:alignmentLeft,},
        { key: "5", parent: "4" },
        { key: "6", parent: "4" },
        { key: "7", parent: "Root" , dir: "left"},
        { key: "8", parent: "Root", dir: "right", color: yellowgrad },
        { key: "9", parent: "Root", group:"HIVE", dir:"right", loveid:"123" },
        { key: "10", parent: "9", group:"HIVE2-1",dir:"right" },
        { key: "11", parent: "9", group:"HIVE2-1",dir:"right" },
        { key: "12", parent: "9", group:"HIVE2-2" },
        { key: "13", parent: "Root", group:"HIVE"},
        { key: "14", parent: "Root", group:"HIVE"},
        { key: "15", parent: "Root", dir: "right", color: yellowgrad },
        { key: "16", parent: "15" },
        { key: "17", parent: "15" },
        { key: "18", parent: "1" },
        { key: "HIVE", parent: "Root", isGroup: true,dir:"right" },
        { key: "HIVE2-1", parent: "HIVE", isGroup: true },
        { key: "HIVE2-2", parent: "HIVE", isGroup: true }
      ];

    var links = [];
    
    for (let i = 0; i < model.length; i++) {
      var data = model[i];
      if (data.parent&&!data.group) links.push({ from: data.parent, to: data.key });
    };

    var myModel = new go.GraphLinksModel(model, links);

    myDiagram.model = myModel;

Lines between Groups or between Nodes can achieve this effect.But when I changed the parent of Group HIVE2-1 and HIVE2-2 from HIVE to 9, I wanted it to look like this:

But the reality is that Groups are not under my control.

I want each node in the group to generate a tree on its own.
Is there a good solution? :-)

[walter]

Yes, I think you do not want to include &&!data.group in your decision whether to create a link.

The problem is that you then have Groups (which are Nodes) that have no links coming into them, so the DoubleTreeLayout thinks they should be “root” nodes. Step through the implementation of how DoubleTreeLayout.separatePartsForLayout decides what is a “root” node and change it to do what you need.

[goLuo]

Thank you for your reply. Although I did not solve the problem in the way you mentioned, your suggestion provided me with the way to solve the problem, which helped me a lot.I connected them using invisible lines by visible:false to handle the layout