I’m trying to create tree chart like this :
How to bypass child 1 level so child 3 will be at equal position and level as child 2 ?
Thanks
Try using this custom TreeLayout:
// Perform a TreeLayout where the node's actual tree-layer is specified by the "band" property on the node data.
function LayeredTreeLayout() {
go.TreeLayout.call(this);
this.treeStyle = go.TreeLayout.StyleLayered; // required
this.layerStyle = go.TreeLayout.LayerUniform; // each layer goes completely across tree
// don't move subtrees closer together, to maintain possible empty spaces between layers
this.compaction = go.TreeLayout.CompactionNone;
// sort a parent's child vertexes by the value of the index property
function compareIndexes(v, w) {
var vidx = v.index;
if (vidx === undefined) vidx = 0;
var widx = w.index;
if (widx === undefined) widx = 0;
return vidx-widx;
}
this.sorting = go.TreeLayout.SortingAscending;
this.comparer = compareIndexes;
}
go.Diagram.inherit(LayeredTreeLayout, go.TreeLayout);
// Modify the standard LayoutNetwork by making children with the same "band" value as their
// parents actually be children of the grandparent.
LayeredTreeLayout.prototype.makeNetwork = function(coll) {
var net = go.TreeLayout.prototype.makeNetwork.call(this, coll);
// annotate every child with an index, used for sorting
for (var it = net.vertexes.iterator; it.next();) {
var parent = it.value;
var idx = 0;
for (var cit = parent.destinationVertexes; cit.next();) {
var child = cit.value;
child.index = idx;
idx += 10000;
}
}
// now look for children with the same band value as their parent
for (var it = net.vertexes.iterator; it.next();) {
var parent = it.value;
// Should this be recursively looking for grandchildren/greatgrandchildren that
// have the same band as this parent node?? Assume that is NOT required.
var parentband = parent.node.data.band;
var edges = [];
for (var eit = parent.destinationEdges; eit.next();) {
var edge = eit.value;
var child = edge.toVertex;
var childband = child.node.data.band;
if (childband <= parentband) edges.push(edge);
}
// for each LayoutEdge that connects the parent vertex with a child vertex
// whose node has the same band #, reconnect the edge with the parent's parent vertex
var grandparent = parent.sourceVertexes.first();
if (grandparent !== null) {
var cidx = 1;
for (var i = 0; i < edges.length; i++) {
var e = edges[i];
parent.deleteDestinationEdge(e);
e.fromVertex = grandparent;
grandparent.addDestinationEdge(e);
var child = e.toVertex;
child.index = parent.index + cidx;
cidx++;
}
}
}
return net;
};
LayeredTreeLayout.prototype.assignTreeVertexValues = function(v) {
if (v.node && v.node.data && v.node.data.band) {
v.originalLevel = v.level; // remember tree assignment
v.level = Math.max(v.level, v.node.data.band); // shift down to meet band requirement
}
};
LayeredTreeLayout.prototype.commitLayers = function(layerRects, offset) {
for (var it = this.network.vertexes.iterator; it.next(); ) {
var v = it.value;
var n = v.node;
if (n && v.originalLevel) {
// the band specifies the "layer" or "level" within the tree structure
var diff = n.data.band - v.originalLevel;
if (diff > 0) {
var pos = v.bounds.position;
// this only works for angle === 0 or 90
if (this.angle === 0) {
pos.x = layerRects[v.level].x;
} else if (this.angle === 90) {
pos.y = layerRects[v.level].y;
}
n.move(pos);
}
}
}
};
Then the following code…
function init() {
var $ = go.GraphObject.make;
myDiagram = $(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center,
layout: $(LayeredTreeLayout, { angle: 90 }) // custom layout is defined below
});
myDiagram.nodeTemplate =
$(go.Node, go.Panel.Auto,
$(go.Shape, "Rectangle",
{ fill: "white" }),
$(go.TextBlock, { margin: 5 },
new go.Binding("text", "key")));
myDiagram.linkTemplate =
$(go.Link,
{ routing: go.Link.AvoidsNodes },
$(go.Shape));
// define the tree node data
var nodearray = [
{ key: "Parent", band: 0 },
{ key: "Child 1", band: 1, parent: "Parent" },
{ key: "Child 2", band: 2, parent: "Child 1" },
{ key: "Child 3", band: 2, parent: "Parent" }
];
myDiagram.model = new go.TreeModel(nodearray);
}
… will produce:
Of course you can easily style the nodes and links in whatever ways you like, to create your blue nodes with white text.
Thanks for answer
Sorry i forgot to mention,
Actually i’m using this template :
Is there anyway to implement this solution on above template chart?
Thanks
Yes, as I said, you can style the nodes and links in your own fashion. Or just use the custom layout in your own app, making sure that the desired layer information is on each node data object as the band property, which you can rename.
Note that your desired tree layout is very ambiguously specified. I interpreted your request in a somewhat general manner, where I assumed that you wanted to specify the layer for each node, with certain restrictions. There are many other interpretations. For example, you might merely want to put all of the leaf nodes in the same bottom layer. If that were the intent, you could just use the layout defined in the Parse Tree sample, Parse Tree.
Thanks for answer Walter, it really helps
Of the two layouts that I suggested, which one matched your needs? Or did you adapt either one to behave yet again differently (other than setting the usual TreeLayout properties)?