Link from and to same node

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

nx.define('MyLink', nx.graphic.Topology.Link, {
  properties: {
    drawMethod: function() {
      return function(edge) {
        var line = this.line();
        var path = [];
        path.push('M', line.start.x, line.start.y);
        path.push('a', " 50 50 0 1 0 0.001 0");
        return path.join(' ');
      }

    }
  }
});


topo = new nx.graphic.Topology({
  adaptive: true,
  nodeConfig: {
    label: 'model.id'
  },
  linkInstanceClass: function(edge) {
    if (edge.sourceID() == edge.targetID()) {
      return 'MyLink'
    } else {
      return 'nx.graphic.Topology.Link'
    }
  },
  showIcon: true,
  theme: 'yellow'
});


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

var app = new nx.ui.Application();
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
  }, {
    "source": 3,
    "target": 0
  }, {
    "source": 3,
    "target": 0
  }, {
    "source": 3,
    "target": 0
  }, {
    "source": 0,
    "target": 4
  }, {
    "source": 0,
    "target": 4
  }, {
    "source": 2,
    "target": 2
  }]
};