Ah, true enough. Try this modification of ConcentricLayout:
while (nodes = this.nodesByLayer(coll, layer), nodes.count > 0) {
if (nodes.count === 1) {
nodes.first().moveTo(0, -rad, true);
} else {
var layout =
$(go.CircularLayout,
{
radius: rad,
arrangement: go.CircularLayout.ConstantAngle,
spacing: NaN
});
layout.doLayout(nodes);
// recenter at (0, 0)
var cntr = layout.actualCenter;
this.diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y));
}
// next layout uses a larger radius
rad += this.radius;
layer++;
}
Note that empty rings, where the number of nodes in a layer is zero, are intentionally skipped over. If you don’t want that behavior, you will need to modify this code accordingly.
Hi, I have observed one thing that in the map we can move the nodes manually to any other layer(circle), can we restrict the node can be manually moved with in the layer it was bounded to.
Also is it possible to have a code that the code itself can decide to optimize the connections(relation links) positions when are multiple connections making graph zigzag
need one more help, in ConcentricLayout type chart for our implementation as discussed earlier
user able to move node out of circle(layer) means he can move to another layer using mouse
it should be moved with in same layer where it was initially placed, should not be moved to another layer using mouse
yes, we need same thing, please help me to apply the same for CircularLayout
Also each node in each circle starting at 0 degrees, we need in layer 1 first node at 0 degress, in layer2 node1 at at 30 degrees like wise, in layer 3 node1 at 60 degrees
In the ConcentricLayout.doLayout method, where it constructs each CircularLayout, you can specify the CircularLayout.startAngle to be a multiple of 30. Oh, and handle the single node case appropriately too, a couple lines above where it constructs the CircularLayout.
I’m not sure what you mean, but if you are talking about the colored circles in the “Grid” layer being clipped by the viewport initially, due to Diagram.initialAutoScale being go.Diagram.Uniform, you could try setting Diagram.padding to something like 40.
The problem with what I suggested above is that it makes sure that all of the nodes are visible, not that all of the circles are visible. If I am understanding what you want.
OK, try this:
ConcentricLayout.prototype.doLayout = function(coll) {
var $ = go.GraphObject.make; // for conciseness in defining templates
this.diagram.startTransaction("Multi Circle Layout");
var coll = this.collectParts(coll);
// assume all circles will be centered at the origin
this.nodesByLayer(coll, 0).each(function(n) { n.location = new go.Point(0, 0); });
var rad = this.radius;
var layer = 1;
var nodes = null;
while (nodes = this.nodesByLayer(coll, layer), nodes.count > 0) {
if (nodes.count === 1) {
nodes.first().moveTo(0, -rad, true);
} else {
var layout =
$(go.CircularLayout,
{
radius: rad,
arrangement: go.CircularLayout.ConstantAngle,
spacing: NaN
});
layout.doLayout(nodes);
// recenter at (0, 0)
var cntr = layout.actualCenter;
this.diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y));
}
// next layout uses a larger radius
rad += this.radius;
layer++;
}
var list = new go.List(this.backgroundShapes.elements);
var biggest = null;
for (var i = list.count-1; i >= 0 ; i--) {
var shp = list.elt(i);
shp.opacity = (i >= (list.count-layer)) ? 1.0 : 0.0;
if (shp.opacity === 1.0) biggest = shp;
}
if (this.backgroundShapes.diagram === null) {
this.diagram.add(this.backgroundShapes);
}
this.diagram.commitTransaction("Multi Circle Layout");
this.diagram.zoomToRect(biggest.getDocumentBounds());
}
myDiagram =
$(go.Diagram, "myDiagramDiv", // must be the ID or reference to div
{
layout: $(ConcentricLayout),
padding: 30,
"animationManager.isEnabled": false
});
this is working but for example in 10th circle if only one node is present, the side(top) which have node looks good but bottom side is cutting, and still nodes are overlaping especially the circles have single nodes.
check image and suggest
See below image this one i adjusted manually this is expected result when chart loads initially.
But in my previous image bottom side of chart is cutting and nodes in last circles start angle or position is same so the relation lines are overlapped
