force_layout_for_nodeSet

by nextsupport

HTML

<link rel="stylesheet" href="https://abdvl.github.io/src/dist/css/next.css">
<script src="https://abdvl.github.io/src/dist/js/next.js"></script>

CSS

body,
html {
  height: 100%;
}

JavaScript

//initialize a topology component
var topo = new nx.graphic.Topology({
  width: 800,
  height: 800,
  showIcon: true,
  autoLayout: true,
  nodeConfig: {
    label: 'model.name'
  },
  linkConfig: {
    linkType: 'parallel'
  },
  vertexPositionGetter: function() {
    // if this is node, use original position
    if (this.type() == "vertex") {
      return {
        x: nx.path(this._data, 'x') || 0,
        y: nx.path(this._data, 'y') || 0
      };
    } else {
      // if this is a nodeSet, use the firNode's position
      var graph = this.graph();
      var firstVertex = graph.getVertex(this.get('nodes').slice(0).shift());

      if (firstVertex) {
        return firstVertex.position();
      } else {
        return {
          x: Math.random() * 500,
          y: Math.random() * 500
        }
      }
    }
  },
  vertexPositionSetter: function(position) {
    if (this._data) {
      var x = nx.path(this._data, 'x');
      var y = nx.path(this._data, 'y');
      if (position.x !== x || position.y !== y) {
        nx.path(this._data, 'x', position.x);
        nx.path(this._data, 'y', position.y);
        return true;
      } else {
        return false;
      }
    }
  }
});

//set data
topo.on('ready', function() {
  topo.data(topologyData);
});

//create app
var app = new nx.ui.Application();
//attach topo to app;
topo.attach(app);

var topologyData = {
  nodes: [{
    "id": 0,
    "x": 410,
    "y": 100,
    "name": "12K-1"
  }, {
    "id": 1,
    "x": 410,
    "y": 280,
    "name": "12K-2"
  }, {
    "id": 2,
    "x": 660,
    "y": 280,
    "name": "Of-9k-03"
  }, {
    "id": 3,
    "x": 660,
    "y": 100,
    "name": "Of-9k-02"
  }, {
    "id": 4,
    "x": 180,
    "y": 190,
    "name": "Of-9k-01"
  }],
  links: [{
    "source": 0,
    "target": 1
  }, {
    "source": 1,
    "target": 2
  }, {
    "source": 1,
    "target": 3
  }, {
    "source": 4,
    "target": 1
  }, {
    "source": 2,
    "target": 3
  }, {
    "source": 2,
    "target": 0
  }, {
   ...