Ring Shaped node in Layered digraph layout

GoJS
1

Hi Walter,

Ring System
Ring System1381×502 36.9 KB

In the diagram, you can see the ring (Ellipse) shaped node.

Actually I have used Ellipse shape and located the rectangular nodes in it.

But I have to make the links that way ellipse, no matter how many nodes are in ring node and also I have to use that node in layereddigraph layout.

Please suggest me any ideas or solutions to achieve this.

2

Make that that node a Group whose Group.layout is a CircularLayout. Don’t use Links to connect the member Nodes, but use a single “Ellipse” Shape that is an object in the group template.

3

Thanks Walter…
Can you please give me sample of just two nodes with one as normal node and one as group node like this??

Also in circular layout, I can’t achieve ellipse shape when I have 2 nodes…

4

Also there is a problem when you have just one or zero member nodes.

But I suppose you could make the “Ellipse” Shape not visible when there are two or fewer nodes.

5

If I have one or zero nodes ,I will not display the links.
Suppose if I have 2 or more nodes, I have to achieve ellipse shaped links…

Please give me sample code connecting two nodes of one as rectangular normal node and another as group node with 2 or more member nodes of ellipse shaped links…

6 
<!DOCTYPE html>
<html>
<head>
  <title>Minimal GoJS Sample</title>
  <!-- Copyright 1998-2021 by Northwoods Software Corporation. -->
  <script src="go.js"></script>
  <script id="code">
  function init() {
    var $ = go.GraphObject.make;

    myDiagram =
      $(go.Diagram, "myDiagramDiv",
        {
          layout: $(go.LayeredDigraphLayout, { isRealtime: false }),
          "undoManager.isEnabled": true
        });

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        { locationSpot: go.Spot.Center },
        $(go.Shape,
          { fill: "white", portId: "" },
          new go.Binding("fill", "color")),
        $(go.TextBlock,
          { margin: 8, editable: true },
          new go.Binding("text").makeTwoWay())
      );

    myDiagram.groupTemplate =
      $(go.Group, "Auto",
        {
          layout:
            $(go.CircularLayout,
              { aspectRatio: 0.62, spacing: 20, startAngle: 210 })
        },
        $(go.Shape, "Ellipse",
          {
            stretch: go.GraphObject.Fill,
            margin: new go.Margin(10, 10),
            spot1: go.Spot.TopLeft,
            spot2: go.Spot.BottomRight,
            fill: "transparent", stroke: "green", strokeWidth: 2,
            portId: ""
          }),
        $(go.Placeholder)
      );

  myDiagram.model = new go.GraphLinksModel(
    [
      { key: 1, text: "Alpha", color: "lightblue" },
      { key: 2, text: "Beta", color: "orange" },
      { key: 3, text: "Gamma", color: "lightgreen", isGroup: true },
      { key: 4, text: "Delta", color: "pink" },
      { group: 3, text: "A" },
      { group: 3, text: "BBBB" },
      { group: 3, text: "CCCC" },
      { group: 3, text: "DDD" },
      { group: 3, text: "EEE" },
    ],
    [
      { from: 1, to: 2 },
      { from: 1, to: 3 },
      { from: 3, to: 4 },
    ]);
  }
  </script>
</head>
<body onload="init()">
  <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:600px"></div>
</body>
</html>

image

7

Thanks Walter…