How to create group and add node dynamically in it

@akashjan4 wrote:

I’m trying to group nodes who are connected and having same color property.
This i’m trying to do dynamically in code

         export const graphData = {
          nodeKeyProperty: "id",
           nodeDataArray: [
          { id: -1, category: "Start", loc: "175 0", text: "Start" },
        { id: -2, category: "End", loc: "175 660", text: "End" },
        {
           id: 0,
           color: "RED",
          Frequency: "3",
       },
       {
         id: 1,
         color: "GREEN",
         Frequency: "2",
        },
       {
        id: 2,
        color: "BLUE",
        Frequency: "3",
   
      },
{
  id: 3,
  color: "BLUE",
  Frequency: "4",
},
{
  id: 4,
  color: "PINK",
  Frequency: "1",

},
{
  id: 5,
  App: "BLUE",
  Frequency: "1",
},
{
  id: 6,
  color: "PINK",
  Frequency: "1",

},
{
  id: 7,
  color: "BLUE",
}
],
  linkDataArray: [
    { from: -1, to: 1, text: "" },
    { from: 0, to: -2, text: "" },
    { from: 1, to: 2, text: 1 },
    { from: 1, to: 4, text: 1 },
    **{ from: 2, to: 3, text: 3 },**
    { from: 2, to: 7, text: 1 },
    { from: 3, to: 0, text: 2 },
    **{ from: 3, to: 2, text: 1 },**
    **{ from: 3, to: 5, text: 1 },**
    { from: 4, to: 2, text: 1 },
    { from: 5, to: 6, text: 1 },
    { from: 6, to: 0, text: 1 },
    **{ from: 7, to: 3, text: 1 },**
    { from: 4, to: 6, text: 1 }
  ],
};

Here, the bold item should be in group, where group title should be color.

I’m not able to group items together.

diagram.links.each(val => {
  if (val.data.from !== -1 && val.data.to !== -2) {
    const fromNode = this.diagram.findNodeForKey(val.data.from);
    const toNode = this.diagram.findNodeForKey(val.data.to);
    __colorname = fromNode.data.color;
    if (__colorname.includes(toNode.data.color) {
        fromNode.isSelected = true;
        toNode.isSelected = true;
        this.processDiagram.commandHandler.archetypeGroupData = {
          title: __appname,
          isGroup: true
        };
        this.processDiagram.commandHandler.groupSelection();
       .
       .
       .

above implementation yields the result, but it do it in nested way and what I want is all the nodes with color: “BLUE” should get grouped together.

Pleas suggest what approach should I take

Examples visited -

• https://gojs.net/latest/samples/regrouping.html
• https://gojs.net/latest/samples/kanban.html

Posts: 2

Participants: 2

Read full topic