Circular Layout and Mindmap expanding

GoJS
1

I was looking for rendering diagram nodes similar to example -
https://gojs.net/latest/samples/incrementalTree.html

With this approach when first level node is expanded, the second level nodes are randomly placed.
How we can make it in circular layout with equal distance from center node ?

When trying to expand second level, it reposition first level nodes also.
How this can be fixed that position of previous level node should not be changed?

Also, it would be nice when second or third level is expanded, the clicked node should moved bit away from its current position so the child nodes of next level do not mix with nodes of previous level.

Can you provide some sample with this visualization ? Here at every level i am expecting maximum one node is expanded. Trying to expand any other node on same level will collapse all other nodes which are expanded on that level.

CodePen Sample

2

Try using RadialLayout.

3

I adapted the RadialLayout example on following codepen where on clicking on yellow node I need to do expand/collapse. Somehow the nodeClicked1 function fails to perform the layout update.
Exception occurs in RadialLayout - can be seen on console.

https://codepen.io/rajeshpatil74/pen/OJpVxYq

Exception occured is - RadialLayout.root must be a Node in the LayoutNetwork that the RadialLayout is operating on.
And i donot want to change the root node here.

Can you help in this.

4

If you’ll note that diagram.layout.root is a reference to a Node that is not in the Diagram. I don’t know how that came about – perhaps you have loaded a new model and thus created all new nodes.

Why don’t you set the RadialLayout.root property to the Node that is the second argument of that click event handler?

5

Setting RadialLayout.root to the node which is clicked, it becomes the center node of the diagram.
My center node needs to remain fix. When node is clicked, i am just changing the visibility of higher level nodes and wanted to perform the layout again.
I guess just changing the visiblity of higher level node for which click happen won’t be working.
Here what i need to do later is - if some node at level 1 is already expanded and clicking on some other node at level 1 (to show level 2 items) i wanted to hide nodes of level 2 which are already visible.
Not sure if the nodes which are previously hidden are involved in calculating position or not.

executing line - //diagram.layout.root = root1; makes the clicked node in center.

6

As you make nodes or links visible or not-visible, a layout will automatically be performed at the end of the transaction.

Does this code help you understand what is going on?

  <script src="go.js"></script>
  <script src="../extensions/RadialLayout.js"></script>
    <script id="code">

    function init() {
      var $ = go.GraphObject.make;  // for conciseness in defining templates

      myDiagram =
        $(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
          {
            initialAutoScale: go.Diagram.Uniform,
            padding: 10,
            isReadOnly: true,
            layout: $(RadialLayout, {
              //maxLayers: 2,
              rotateNode: function(node, angle, sweep, radius) {
                // rotate the nodes and make sure the text is not upside-down
                node.angle = angle;
                var label = node.findObject("TEXTBLOCK");
                if (label !== null) {
                  label.angle = ((angle > 90 && angle < 270 || angle < -90) ? 180 : 0);
                }
              }
            })
          });

      myDiagram.nodeTemplate =
        $(go.Node, "Spot",
          {
            locationSpot: go.Spot.Center,
            locationObjectName: "SHAPE",  // Node.location is the center of the Shape
            selectionAdorned: false,
            click: nodeClicked
          },
          $(go.Shape, "Circle",
            {
              name: "SHAPE",
              fill: "lightgray",  // default value, but also data-bound
              stroke: "transparent",
              strokeWidth: 2,
              desiredSize: new go.Size(20, 20),
              portId: ""  // so links will go to the shape, not the whole node
            },
            new go.Binding("fill", "color")),
          $(go.TextBlock,
            {
              name: "TEXTBLOCK",
              alignment: go.Spot.Right,
              alignmentFocus: go.Spot.Left
            },
            new go.Binding("text"))
        );

      myDiagram.linkTemplate =
        $(go.Link,
          { curve: go.Link.Bezier },
          $(go.Shape),
          $(go.Shape, { toArrow: "Standard" })
        );

      // this is the root node, at the center of the circular layers
      myDiagram.nodeTemplateMap.add("Root",
        $(go.Node, "Auto",
          {
            locationSpot: go.Spot.Center,
            selectionAdorned: false
          },
          $(go.Shape, "Circle",
            { fill: "white" }),
          $(go.TextBlock,
            { font: "bold 12pt sans-serif", margin: 5 },
            new go.Binding("text"))
        ));

      generateGraph();
    }

    function generateGraph() {
      var names = [
        "Joshua", "Daniel", "Robert", "Noah", "Anthony",
        "Elizabeth", "Addison", "Alexis", "Ella", "Samantha",
        "Joseph", "Scott", "James", "Ryan", "Benjamin",
        "Walter", "Gabriel", "Christian", "Nathan", "Simon",
        "Isabella", "Emma", "Olivia", "Sophia", "Ava",
        "Emily", "Madison", "Tina", "Elena", "Mia",
        "Jacob", "Ethan", "Michael", "Alexander", "William",
        "Natalie", "Grace", "Lily", "Alyssa", "Ashley",
        "Sarah", "Taylor", "Hannah", "Brianna", "Hailey",
        "Christopher", "Aiden", "Matthew", "David", "Andrew",
        "Kaylee", "Juliana", "Leah", "Anna", "Allison",
        "John", "Samuel", "Tyler", "Dylan", "Jonathan"
      ];

      var nodeDataArray = [];
      for (var i = 0; i < names.length; i++) {
        nodeDataArray.push({ key: i, text: names[i], color: go.Brush.randomColor(128, 240) });
      }

      var linkDataArray = [];
      var num = nodeDataArray.length;
      for (var i = 1; i < num; i++) {
        var a = Math.floor(Math.random() * i);
        linkDataArray.push({ from: a, to: i, color: go.Brush.randomColor(0, 127) });
      }

      myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);

      myDiagram.layout.root = myDiagram.findNodeForData(nodeDataArray[0]);
      myDiagram.layout.root.category = "Root";
    }

    function nodeClicked(e, node) {
      if (node.isTreeExpanded) {
        e.diagram.commandHandler.collapseTree(node);
      } else {
        e.diagram.commandHandler.expandTree(node);
      }
    }

    window.addEventListener('DOMContentLoaded', init);
  </script>

<div id="sample">
  <div id="myDiagramDiv" style="border: solid 1px black; background: white; width: 100%; height: 600px"></div>
</div>
7

Hi Walter,
Thanks for sharing the new sample. I guess it may be something with commit layer functionality in original code. I still need to check whats wrong in the original sample.

With new code the how one can move child nodes when parent node is moved ?
Do I need to implement some handler or it will be possible with by just setting some property ?

https://codepen.io/rajeshpatil74/full/oNZjBZd

8

If the graph is tree-structured, you can set DraggingTool | GoJS API to true.

$(go.Diagram, . . .,
  {
    "draggingTool.dragsTree": true,
    . . .
  })
9

Walter,

With Radial Layout, how one can prevent in the following image red marked nodes hidden.
Do I need to set visibility of same manually ?

image
image1122×800 83.9 KB

Yellow marked node is top level node when diagram loaded it was set to “Root”. Like below image.
image

When clicked on Blue marked node diagram changes like shown in first image.

10

Nodes and Links are visible, by default. They can become not-visible either by setting their Part.visible property or by collapsing the tree parent node or the containing group.

What is your click event handler doing?

11

When “Sales” node clicked, i am expanding it using expandTree CommandHander
and setting the RadialLayout to the clicked node.

12

I thought you did not want to change the RadialLayout.root.

If you do, then the graph is not really tree-structured, unless you change the direction of the links between the new root and the old root.

13

Didn’t get you how to achive the expected result.

Not changing radiallayout root giving following result.

So when there are lots of nodes, it would be better to show the clicked node in center and other nodes aligned circular. (currently it is in one direction and nodes gets overlapped)

To go backward, may be some back navigation can be given either from diagram or button outside diagram div.

image
image1349×663 29.9 KB

14

OK, so you do want to change the RadialLayout.root after all. In that case, if you do not modify the direction of any links, the clicked node will not be the tree-root and you cannot depend on calling CommandHandler.collapseTree or CommandHandler.expandTree. So the code in the original Radial Layout sample should work.

15

Yes. Original sample worked.
Previously i was expecting the diagram to go on expanding as clicks happens. But since there are lot of node diagram was not readable. So wanted to change the center node as per original example.