Link Arrow
HTML
<link rel="stylesheet" href="http://xq.cisco.com/next/release/latest/next/css/next-blue.css">
<script src="http://xq.cisco.com/next/release/latest/next/js/next.js"></script>
<script src="http://xq.cisco.com/next/release/latest/next-topology/js/next-topology.js"></script>
<link rel="stylesheet" href="http://xq.cisco.com/next/release/latest/next-topology/css/next-topology.css">
CSS
body,html{
height: 100%;
}
JavaScript
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
}]
};
var Line = nx.geometry.Line;
var Vector = nx.geometry.Vector;
// extend link class
nx.define('MyExtendLink', nx.graphic.Topology.Link, {
methods: {
update: function () {
var _offset = this.getOffset();
var offset = new Vector(0, _offset);
var stageScale = this.stageScale();
var width = (this._width || 1) * (this._stageScale || 1);
var line = this.reverse() ? this.line().negate() : this.line();
var lineEl = this.view('line');
var pathEL = this.view('path');
var newLine = line.translate(offset).pad(22 * stageScale, 32 * stageScale);
...