Cocentric CircularLayout - actual radius is smaller than configured

GoJS
1

Hello,

I am trying to get a cocentric circular layout working, which I based on the double circle example. The placement of each ring is meant to communicate distance from a center node in the raw graph data, so it’s important that the radius effectively makes each successive ring appear outside the inner rings, despite the number of nodes in each ring.

I am facing a problem in that radius is being shrunk whenever I have spacing enabled and when an outer ring has fewer nodes than an inner ring. I would like to use spacing because otherwise I would have to adjust radius myself to make sure nodes don’t overlap.

I have attached two pictures of my modified doubleCircle.html example. The one without spacing shows the rings in the proper order but the nodes overlap. In the one with spacing set to 0, the blue ring appears inside the green ring when it should appear outside.

with_spacing.png1920×1040 63.5 KB

without_spacing.png1920×1040 74.4 KB

I know from the documentation that actual radius may be larger in order to satisfy that actual spacing is greater than or equal to configured spacing - however, the behavior I am seeing is the opposite where the actual radius is smaller, which I did not see mentioned.

Any ideas on how I can both use spacing and enforce the radius at each ring?

Thanks,
Brandon

2

What CircularLayout properties are you using? Is CircularLayout.arrangement set to go.CircularLayout.Packed?

3

I am using aspect ratio, spacing and radius, everything else is default. Here is from my modified double circle sample:

var layout = $(go.CircularLayout,
{ radius: radius, aspectRatio: 0.45, spacing: 0 });

4

Well, does arrangement: Packed help?

5

The documentation says that radius is ignored when the Packed arrangement is used. It looks like when I use that arrangement, my problem is still there - the size of each ring is depending on the number of nodes, rather than the radius I am setting. I attached the screenshot when using Packed, and the blue-green ring which should be the outermost ring is still inside of the green ring:

Pasted image1920×1040 92.4 KB

Here is the data I am setting up in the double circle sample for better clarity on what I am going for. The higher the layer property, the farther out the ring should be from the center. It works fine when each successive layer has more nodes than the last, but when an outer layer has fewer nodes it has this problem.

data.push({ key: ‘ServiceNameHere-Prod-XY3_0_0’, layer: 0, color: ‘yellow’ });

for (var i = 0; i < 15; i++) {
    data.push({ key: 'ServiceNameHere-Prod-XY3_1_' + i, layer: 1, color: 'greenyellow' });
    links.push({ from: 'ServiceNameHere-Prod-XY3_0_0', to: 'ServiceNameHere-Prod-XY3_1_' + i }); 
}

for (var i = 0; i < 50; i++) { 
    data.push({ key: 'ServiceNameHere-Prod-XY3_2_' + i, layer: 2, color: 'limegreen' });
}

for (var i = 0; i < 40; i++) { 
    data.push({ key: 'ServiceNameHere-Prod-XY3_3_' + i, layer: 3, color: 'mediumaquamarine' });
}

myDiagram.model = new go.GraphLinksModel(data, links);
6

Oh, so you want to have nodes overlapping in the same circle/ellipse? That’s unusual, but you can set spacing to negative numbers.

Why don’t you layout the innermost circle, find out how big it is, and then layout out the next one to fit around it, etc.? Look at the actual… properties after the layout.

7

Oh, so you want to have nodes overlapping in the same circle/ellipse?

No, I do not want the nodes overlapping in the same ellipse.

My two requirements are:

  1. Each circle has a bigger actual radius depending on the “layer” property in the data.
  2. The nodes do not overlap. (However, it’s OK if there is a lot of space between the nodes which may be the case when the outer most layer has few nodes compared to inner layers).

Does this make sense so far? Sorry if I am not being clear.

I can achieve #1 if I set spacing to NaN, and #2 if I set spacing to a number, but I’m having trouble getting both at the same time (see my initial post for the screenshots with spacing / without).

Good idea about using actualRadius to set the radius for next layer. I tried something like this, but I am still seeing my the outer layer (with 40 nodes) appear inside the inner layer (with 50 nodes).

Pasted image1174×506 22.8 KB

while (nodes = nodesByLayer(diagram, layer), nodes.count > 0) {
  var layout = $(go.CircularLayout, 
    { radius: radius, aspectRatio: 0.45, spacing: 0 });
  layout.doLayout(nodes);
  // recenter at (0, 0)
  var cntr = layout.actualCenter;
  diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y));
  // next layout uses a larger radius
  radius = layout.actualRadius * 2;
  layer++;
}

EDIT: here is the full code for my modified double circle sample: <!DOCTYPE html><html><head><title>Double Circle</title><meta name="descr - Pastebin.com

8

There is no actualRadius property. But this works for me:

    var radius = 100;
    var layer = 1;
    var nodes = null;
    while (nodes = nodesByLayer(diagram, layer), nodes.count > 0) {
      console.log(radius);
      var layout = $(go.CircularLayout,
                     { radius: radius, nodeDiameterFormula: go.CircularLayout.Circular });
      layout.doLayout(nodes);
      // recenter at (0, 0)
      var cntr = layout.actualCenter;
      diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y));
      // next layout uses a larger radius
      radius = layout.actualXRadius + 100;
      layer++;
    }
9

Hi all,

i have issue when apply your code in my demo:
Overlapping happen between root node(layer:0) with nodes(layer 1).
do you guys have any comment for this situation.
See demo demo circular layout

10

I answered your colleague’s question via email, please refer to that conversation, and try to limit yourselves to one method of communication so everything is organized.