Hi Walter,
I have a graph with LayeredDigraphLayout. And I have set parent of each leaf node to isGroup = true and group of each leaf node to leaf’s parent key. because I’m trying to set TreeLayout to all the leaf nodes. This is all works fine but I wasn’t able to set the aligment of the TreeLayout to AlignmentBottomRightBus. It’s just doesn’t work.
Is it possible to do like that? Or do I need to write a custom layout for that?
node data model:
{ "NodeId": 1, "NodeKey": "A1AEQ001", "Caption": "test", "Tooltip": "test", }
edge data model:
{ "EdgeId": 1, "ParentNodeId": 52, "ChildNodeId": 1, "Caption": "test", "Tooltip": "test", "ParentNodeKey": "I1BAL001", "ChildNodeKey": "A1AEQ001" }
code:
` function init() {
var $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram = $(go.Diagram, "myDiagramDiv", // create a Diagram for the DIV HTML element
{
layout: $(go.LayeredDigraphLayout,
{
direction: 90,
layerSpacing: 25,
columnSpacing: 5,
setsPortSpots: false,
cycleRemoveOption: go.LayeredDigraphLayout.CycleDepthFirst,
initializeOption: go.LayeredDigraphLayout.LayerOptimalLinkLength,
aggressiveOption: go.LayeredDigraphLayout.InitDepthFirstOut,
packOption: 7,
setsPortSpots: true
})
});
// define a simple Node template
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
new go.Binding("fill", "BackgroundColour")),
$(go.TextBlock,
{ margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
new go.Binding("text", "NodeKey"))
);
myDiagram.groupTemplate =
$(go.Group, "Auto",
{
//layout: $(OffsetLayout)
layout: $(go.TreeLayout,
{ angle: 90, nodeSpacing: 110, layerSpacing: 130, alignment: go.TreeLayout.AlignmentBottomRightBus })
},
$(go.Shape, "RoundedRectangle", { strokeWidth: 0, fill: "white" },
new go.Binding("fill", "BackgroundColour")),
$(go.TextBlock,
{ margin: 8, font: "bold 14px sans-serif", stroke: '#333' },
new go.Binding("text", "NodeKey"))
);
let groups = [];
data.Nodes.forEach((x) => {
if (!data.Edges.some(y => y.ParentNodeKey === x.NodeKey)) {
x.Group = data.Edges.filter(y => y.ChildNodeKey === x.NodeKey)[0].ParentNodeKey;
groups.push(x.Group);
}
});
groups.forEach((x) => {
data.Nodes.filter(y => y.NodeKey === x)[0]["isGroup"] = true;
});
myDiagram.model =
$(go.GraphLinksModel,
{
nodeKeyProperty: "NodeKey",
linkKeyProperty: "NodeKey",
linkFromKeyProperty: "ParentNodeKey",
linkToKeyProperty: "ChildNodeKey",
nodeGroupKeyProperty: "Group",
nodeDataArray: data.Nodes,
linkDataArray: data.Edges,
});
}`
output:
expected output for leaf nodes:
I was following the below thread to implement it.
Thanks in advance!