Hi All :)
I want to create this graph using bands as: Bands
and I want to setting each node his bands:
I added band attribute and using that code but It’s doesn’t work all the time - In case we have Node without edges / in case there is a n1 —> n2 and band(n1) > band(n2) it’s doesn’t work
Actual:
The code:
public initDiagram(): go.Diagram {
// this controls whether the layout is horizontal and the layer bands are vertical, or vice-versa:
let HORIZONTAL = this.horizontal; // this constant parameter can only be set here, not dynamically
// Perform a TreeLayout where commitLayers is overridden to modify the background Part whose key is "_BANDS".
function LayeredTreeLayout() {
go.TreeLayout.call(this);
this.treeStyle = go.TreeLayout.StyleLayered; // required
// new in GoJS v1.4
this.layerStyle = go.TreeLayout.LayerUniform;
// don't move subtrees closer together, to maintain possible empty spaces between layers
this.compaction = go.TreeLayout.CompactionNone;
// move the parent node towards the top of its subtree area
this.alignment = go.TreeLayout.AlignmentStart;
// 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;
//this.setsPortSpot = false;
this.setsChildPortSpot = false;
}
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 horizontal position
var diff = n.data.band - v.originalLevel;
if (diff > 0) {
var pos = v.bounds.position;
// this assumes that the angle is zero: rightward growth
pos.x = layerRects[v.level].x;
n.move(pos);
}
}
}
// update the background object holding the visual "bands"
var bands = this.diagram.findPartForKey("_BANDS");
if (bands) {
bands.layerRects = layerRects; // remember the Array of Rect
var model = this.diagram.model;
for (var it = this.network.vertexes.iterator; it.next();) {
var v = it.value;
model.setDataProperty(v.node.data, "level", v.level);
}
bands.location = this.arrangementOrigin.copy().add(offset);
var arr = bands.data.itemArray;
for (var i = 0; i < layerRects.length; i++) {
var itemdata = arr[i];
if (itemdata) {
model.setDataProperty(itemdata, "bounds", layerRects[i]);
}
}
}
};
and the nodes are:
0: {band: 0, category: “simple”, key: “Q0”,…}
1: {band: 1, category: “simple”, key: “Q1”,…}
2: {band: 2, category: “simple”, key: “Q2”,…}
3: {band: 3, category: “simple”, key: “Q3”,…}
4: {band: 4, category: “simple”, key: “Q4”,…}
5: {band: 5, category: “simple”, key: “Q5”,…}
6: {band: 6, category: “simple”, key: “Q6”,…}
7: {category: “Bands”,…}
category: “Bands”
itemArray: [{text: “(0 inc)”}, {text: “(0 std)”}, {text: “(0 dec)”}, {text: “((0 top) inc)”}, {text: “(top std)”},…]
- 0: {text: “(0 inc)”}
- 1: {text: “(0 std)”}
- 2: {text: “(0 dec)”}
- 3: {text: “((0 top) inc)”}
- 4: {text: “(top std)”}
- 5: {text: “(top inc)”}
- 6: {text: “(L1 std)”}
Please help me guys :(
Thanks and have a nice day :)
