Hi All,
I am creating a multiple layered chart and each layers has nodes with respective orders. For example, nodes with order 1 will stay at first layer and nodes with order 4 will stay at the last layer.
The problem is the layout function seems not working.
My codes are as follow:
<script>
function MultiLayerLayout() {
go.LayeredDigraphLayout.call(this);
}
go.Diagram.inherit(MultiLayerLayout, go.LayeredDigraphLayout);
MultiLayerLayout.prototype.assignLayers = function() {
this.network.vertexes.each(function(v) {
if (!v.node || !v.node.data) return;
// decide whether to go in top row or bottom row based on the order of the data.order property
if (v.node.data.order == "1") {
v.layer = 0;
} else if (v.node.data.order == "2") {
v.layer = 1;
} else if (v.node.data.order == "3") {
v.layer = 2;
} else if (v.node.data.order == "4") {
v.layer = 3;
}
})
};
function init() {
var $ = go.GraphObject.make;
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
initialContentAlignment: go.Spot.Center
});
myDiagram.nodeTemplate =
$(go.Node, "Auto",
$(go.Shape,
{ fill: "white" },
new go.Binding("fill", "color")),
$(go.TextBlock,
{ margin: 10 },
new go.Binding("text"))
);
myDiagram.linkTemplate =
$(go.Link,
$(go.Shape, { strokeWidth: 2 }),
$(go.Shape, { toArrow: "OpenTriangle" })
);
myDiagram.model = new go.GraphLinksModel(
[
{ key: 1, text: "Alpha", color: "lightblue", order: "1" },
{ key: 2, text: "Beta", color: "orange", order: "1" },
{ key: 3, text: "Gamma", color: "lightgreen", order: "1" },
{ key: 4, text: "Delta", color: "pink", order: "1" },
{ key: 5, text: "Epsilon", color: "lightyellow", order: "2" },
{ key: 6, text: "Zeta", color: "lavender", order: "2" },
{ key: 7, text: "Eta", color: "beige", order: "2" },
{ key: 8, text: "Theta", color: "lightgray", order: "2" },
],
[
{ from: 6, to: 2 },
{ from: 5, to: 1 },
{ from: 8, to: 4 }
]);
}
</script>
and the chart is as follow:
Any help provided will be appreciated. Thanks.
Regards,
Brian