Layer layout based on node.data.order property

@brianc wrote:

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

Posts: 1

Participants: 1

Read full topic