Thank you walter,
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
please help
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
please help us.
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.
excellent, works well. Thanks
hi walter,
if there are layers 10 or more, chart is coming in zoomout mode, and it is going out of frame.
we need to fit entire chart with in frame initially until we zoom out it. plz help
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.
$(go.Diagram, . . .,
{
layout: $(ConcentricLayout),
padding: 40,
initialAutoScale: go.Diagram.Uniform,
"animationManager.isEnabled": false
});
please help on above and if you see the chart nodes are still coming in linear in last 3 layers.
see below code and advise please
// assume all circles will be centered at the origin
this.nodesByLayer(coll, 0).each(function(n) { n.location = new go.Point(0, 12); });
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,
startAngle:30*layer,
//sorting:go.CircularLayout.Optimized,
});
layout.doLayout(nodes);
// recenter at (0, 0)
var cntr = layout.actualCenter;
this.diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y+12));
}
// next layout uses a larger radius
rad += this.radius;
layer++;
}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
I don’t see a problem. Please describe the problem more precisely.
Maybe you want to either make the nodes smaller or the circular bands wider?
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
So you are only concerned about the single node in a layer cases? If so, adjust the code that positions that single node.
Can’t we apply circular layout for single node layers.I can see in the below code that circular layout is not applied for single node layers. I tried to apply but it is not working.
if (nodes.count === 1)
{
nodes.first().moveTo(0, -rad, true);(0, -rad, true);
} else {
var layout =
$(go.CircularLayout,
{
radius: rad,
arrangement: go.CircularLayout.ConstantAngle,
spacing: NaN,
startAngle:30*layer,
//sorting:go.CircularLayout.Optimized,
});
layout.doLayout(nodes);
// recenter at (0, 0)
var cntr = layout.actualCenter;
this.diagram.moveParts(nodes, new go.Point(-cntr.x, -cntr.y+12));
}Yes, it’s hard to make a circle with a single node. I had missed that case originally, but added that fix back on March 3rd.
You could have each layer, if it only has a single node, position that node at different angles.
here I am struggling how to position the node in layer if it only has a single node, please help
Well, you have seen the code, which both of us have posted before. You could just move the node to a different point that is rad distance from the origin.
Ok, Thanks , I tried it did not work.