Hi Walter,
I created a treelayout visualization with nodes and links and got good result ,but when i use reverse link to starting node in diagram, nodes look’s like overlapped…, is there any solution to fix the issue in other ways or in latest gojs versions. Any response would be helpful :)
It would have been helpful if you had included a screenshot showing the problem.
TreeLayout does not result in any overlapping nodes, unless you set some properties to negative values, which I assume you haven’t done.
I’ll guess that you might want to identify those “reverse” links and set their Part.isLayoutPositioned to false and/or set their Link.isTreeLink to false.
Actually we are trying to load TreeLayout and we are using the following data and templates , but we are unable to load the diagram properly . How can we achieve this in TreeLayout , without degrading performance?
myDiagram.groupTemplate =
$$(go.Group, "Auto",
{
layout: makeLayout(false),
background: "transparent",
// isAnimated:false,
ungroupable: true,
new go.Binding("isSubGraphExpanded", "isSubGraphExpanded"),
$$(go.Shape, "RoundedRectangle", {
portId: "",
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left
},
{fill: null, stroke: defaultColor(false), strokeWidth: 2},
new go.Binding("stroke", "horiz", defaultColor),
new go.Binding("stroke", "color"))
, $$(go.Panel, "Vertical",new go.Binding("background", "horiz", backgroundColor),
$$(go.Panel, "Horizontal",
{stretch: go.GraphObject.Horizontal, background: defaultColor(false),name: "GROUPSHAPE"},
new go.Binding("background", "horiz", defaultColor),
new go.Binding("height", "horiz", defaultHeight),
new go.Binding("background", "color"),
$$("SubGraphExpanderButton",
{alignment: go.Spot.Right, margin: 5,
click: expandOrCollapseNode
}),
$$(go.TextBlock,
{
alignment: go.Spot.Left,
editable: true,
margin: 5,
font: defaultFont(false),
opacity: 0.75,
},
new go.Binding("stroke", "horiz", fontColor),
new go.Binding("font", "horiz", defaultFont),
new go.Binding("text", "text").makeTwoWay())
),
$$(go.Placeholder,
{padding: 0, margin: new go.Margin(0, 0, 0, 8), alignment: go.Spot.TopLeft})
)
);
myDiagram.nodeTemplate =
$$(go.Node, "Auto",
$$(go.Shape, "RoundedRectangle",
{fill: "#d3e5f3", stroke: null,
portId: "",
fromSpot: go.Spot.Right,
toSpot: go.Spot.Left,
name: "SHAPE"},
new go.Binding("fill", "color")),
$$(go.TextBlock,
{
margin: 5,
editable: true,
font: "bold 10px sans-serif",
opacity: 0.75,
stroke: "black"
},
new go.Binding("text", "text").makeTwoWay()),
);
myDiagram.linkTemplate = $$(go.Link, {layerName: ''
},
new go.Binding("isTreeLink", "isTreeLink"),
new go.Binding("isLayoutPositioned", "isTreeLink"),
$$(go.Shape, {stroke: "gray"}),
$$(go.Shape,
{toArrow: "Standard", stroke: "gray", name: "ARROWSHAPE"}));
nodesArray = [
{"key": "S1", "isGroup": true, "text": "S1", "horiz": "SYSTEM", "isSubGraphExpanded": true}
,{"key": "S2", "isGroup": true, "text": "S2", "horiz": "SYSTEM", "isSubGraphExpanded": true}
,{"key": "S3", "isGroup": true, "text": "S3", "horiz": "SYSTEM", "isSubGraphExpanded": true}
,{"key": "S4", "isGroup": true, "text": "S4", "horiz": "SYSTEM", "isSubGraphExpanded": true} ];
linksArray = [{"from": "S1", "to": "S2" ,"isTreeLink":true}
,{"from": "S2", "to": "S3","isTreeLink":true}
,{"from": "S3", "to": "S4","isTreeLink":true}
,{"from": "S2", "to": "S1","isTreeLink":true}
,{"from": "S1", "to": "S3","isTreeLink":true}
,{"from": "S3", "to": "S2","isTreeLink":true}
,{"from": "S3", "to": "S1","isTreeLink":true}
];
Image is attached in above thread for your reference.
Link.isTreeLink is true by default, so you don’t need to set that property in all of those link data objects in your model. So is Group.isSubGraphExpanded, on the node data for the groups.
So your model has four nodes, each of which is represented by a Group.
And your model has a bunch of links that do not form a tree structured graph.
your model has a bunch of links that do not form a tree structured graph
with that same link data, can we represent those with tree layout?
Could you please show us what result you want?
how to identify those reverse links for which isTreeLink property should be set to false?
linksArray = [{"from": "S1", "to": "S2" ,"isTreeLink":true}
,{"from": "S1", "to": "S3","isTreeLink":true}
,{"from": "S1", "to": "S4" ,"isTreeLink":true}
,{"from": "S2", "to": "S1","isTreeLink":true}
,{"from": "S2", "to": "S3","isTreeLink":true}
,{"from": "S2", "to": "S4" ,"isTreeLink":true}
,{"from": "S3", "to": "S4","isTreeLink":true}
,{"from": "S3", "to": "S2","isTreeLink":true}
,{"from": "S3", "to": "S1","isTreeLink":true}
,{"from": "S3", "to": "S0","isTreeLink":true}
];
Well, if you are using TreeLayout, I suppose you could assume that any link going “backwards” shouldn’t be considered an Link.isTreeLink. But you wouldn’t know that before the layout happens.
The point of setting Link.isTreeLink to false is to prevent the TreeLayout from accidentally treating the link as if it were part of the tree structure and thus influence (mess up?) the tree layout. But I do not know how you want to lay out your diagram, which is why I was hoping you could show what you wanted.
You get that effect with the default settings.
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout),
"undoManager.isEnabled": true
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{ layout: $(go.TreeLayout) },
$(go.Shape, { fill: "lightgray" },
new go.Binding("fill", "color")),
$(go.Placeholder, { padding: 5 }),
$(go.TextBlock, new go.Binding("text"), { alignment: go.Spot.Top, margin: 5 })
)
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 10 },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "S1", text: "Alpha", color: "lightblue", isGroup: true },
{ key: "S2", text: "Beta", color: "orange", isGroup: true },
{ key: "S3", text: "Gamma", color: "lightgreen", isGroup: true },
{ key: "S4", text: "Delta", color: "pink", isGroup: true }
],
[{"from": "S1", "to": "S2"}
,{"from": "S1", "to": "S3"}
,{"from": "S1", "to": "S4"}
,{"from": "S2", "to": "S1"}
,{"from": "S2", "to": "S3"}
,{"from": "S2", "to": "S4"}
,{"from": "S3", "to": "S4"}
,{"from": "S3", "to": "S2"}
,{"from": "S3", "to": "S1"}
,{"from": "S3", "to": "S0"}
]);
}
produces:
I now note that there’s no “S0” in your model, but there is in your screenshot.
Hi walter,
Please consider this link array with same node templates and group templates you have mentioned.
[{"from": "S1", "to": "S2"}
, {"from": "S2", "to": "S3"}
, {"from": "S3", "to": "S4"}
, {"from": "S2", "to": "S1"}
, {"from": "S1", "to": "S3"}
, {"from": "S3", "to": "S2"}
, {"from": "S3", "to": "S1"}]
i am unable to get layout. find the image below i got .
OK. I tried it using your link data, and everything was fine. I also tried it using just nodes (no groups). Here’s the whole program using your link data:
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(go.TreeLayout)
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, { fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock, { margin: 8 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes, corner: 10 },
$(go.Shape),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: "S1", text: "Alpha", color: "lightblue" },
{ key: "S2", text: "Beta", color: "orange" },
{ key: "S3", text: "Gamma", color: "lightgreen" },
{ key: "S4", text: "Delta", color: "pink" }
],
[
{"from": "S1", "to": "S2"}
, {"from": "S2", "to": "S3"}
, {"from": "S3", "to": "S4"}
, {"from": "S2", "to": "S1"}
, {"from": "S1", "to": "S3"}
, {"from": "S3", "to": "S2"}
, {"from": "S3", "to": "S1"}
]);
}
The result is:
hi walter,
i am facing this issue with groups in GoJS v1.6.20.
please let me know the changes, what i have to make in implementaion to work with GoJS v1.6.20
myDiagram.layout.roots.add(myDiagram.findNodeForKey("S1"));
myDiagram.layout.invalidateLayout();