|
|
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS Bin</title>
- <script type="text/javascript" src="../dist/vis.js"></script> <!-- network handling framework -->
- <link href="../dist/vis.css" rel="stylesheet" type="text/css"/>
- <style type="text/css">
- #network{
- width: 1900px;
- height: 800px;
- border: 1px solid lightgray;
- }
- </style>
- </head>
- <body>
- <h1>Network Test</h1>
- <div id="network"></div>
-
- <script type="text/javascript">
- // create an array with nodes
- var nodes = [
- {"id":3,"label":"SDPBCC\n SDPA","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPBCC"},
- {"id":14,"label":"SDPTPH\nSDPTPH","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPTPH"},
- {"id":6,"label":"SDPBCC\nSDPBCC","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPBCC"},
- {"id":9,"label":"CCNTPH\nCCNTPH","group":"CCN","level":5,"shape":"image","image":"ccn.png","cluster":"CCNTPH"},
- {"id":7,"label":"SDPTPH\n SDPA","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPTPH"},
- {"id":12,"label":"AIRTPH\n ","group":"AIR","level":3,"shape":"image","image":"air.png","cluster":"AIRTPH"},
- {"id":5,"label":"SDPBCC2\n SDPA","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPBCC2"},
- {"id":10,"label":"VS:172.26.104.11\n","group":"VS","level":2,"shape":"image","image":"vs.png","cluster":"VS:172.26.104.11"},
- {"id":15,"label":"VS:172.26.104.10\n","group":"VS","level":2,"shape":"image","image":"vs.png","cluster":"VS:172.26.104.10"},
- {"id":1,"label":"AIRBCC\n ","group":"AIR","level":3,"shape":"image","image":"air.png","cluster":"AIRBCC"},
- {"id":4,"label":"CCNBCC\nCCNBCC","group":"CCN","level":5,"shape":"image","image":"ccn.png","cluster":"CCNBCC"},
- {"id":16,"label":"SDPTPH2\n SDPA","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPTPH2"},
- {"id":2,"label":"VS:172.26.11.16\n","group":"VS","level":2,"shape":"image","image":"vs.png","cluster":"VS:172.26.11.16"},
- {"id":8,"label":"VS:172.26.11.15\n","group":"VS","level":2,"shape":"image","image":"vs.png","cluster":"VS:172.26.11.15"},
- {"id":13,"label":"SDPTPH2\nSDPTPH2","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPTPH2"},
- {"id":11,"label":"SDPBCC2\nSDPBCC2","group":"SDP","level":4,"shape":"image","image":"sdp.png","cluster":"SDPBCC2"}
- ];
-
- for (var i = 0; i < nodes.length; i++) {
- nodes[i].label = nodes[i].id
- nodes[i].shape = "dot"
- }
-
- // create an array with edges
- var edges = new vis.DataSet([
- {"from":12,"to":6,"label":"RPC","font":{"align":"top"}},
- {"from":12,"to":15,"label":"XmlRPC","font":{"align":"top"}},
- {"from":1,"to":2,"label":"XmlRPC","font":{"align":"top"}},
- {"from":12,"to":8,"label":"XmlRPC","font":{"align":"top"}},
- {"from":1,"to":10,"label":"XmlRPC","font":{"align":"top"}},
- {"from":7,"to":4,"label":"Diameter","font":{"align":"top"}},
- {"from":12,"to":10,"label":"XmlRPC","font":{"align":"top"}},
- {"from":5,"to":4,"label":"Diameter","font":{"align":"top"}},
- {"from":1,"to":8,"label":"XmlRPC","font":{"align":"top"}},
- {"from":1,"to":14,"label":"RPC","font":{"align":"top"}},
- {"from":1,"to":13,"label":"RPC","font":{"align":"top"}},
- {"from":5,"to":9,"label":"Diameter","font":{"align":"top"}},
- {"from":3,"to":4,"label":"Diameter","font":{"align":"top"}},
- {"from":12,"to":2,"label":"XmlRPC","font":{"align":"top"}},
- {"from":3,"to":9,"label":"Diameter","font":{"align":"top"}},
- {"from":16,"to":4,"label":"Diameter","font":{"align":"top"}},
- {"from":7,"to":9,"label":"Diameter","font":{"align":"top"}},
- {"from":16,"to":9,"label":"Diameter","font":{"align":"top"}},
- {"from":1,"to":6,"label":"RPC","font":{"align":"top"}},
- {"from":12,"to":14,"label":"RPC","font":{"align":"top"}},
- {"from":1,"to":15,"label":"XmlRPC","font":{"align":"top"}},
- {"from":12,"to":11,"label":"RPC","font":{"align":"top"}},
- {"from":12,"to":13,"label":"RPC","font":{"align":"top"}},
- {"from":1,"to":11,"label":"RPC","font":{"align":"top"}}
- ]);
-
- var showAll=true;
-
- // create a network
- var container = document.getElementById('network');
- var data = {
- nodes: nodes,
- edges: edges
- };
- var options = {
-
- /* edges:{hidden:true}, */
-
- layout: {
- randomSeed: undefined,
- hierarchical: {
- enabled:true,
- /* improvedLayout:true,*/
- levelSeparation: 250,
- nodeSpacing: 150,
- blockShifting: true,
- direction: 'UD', // UD, DU, LR, RL
- sortMethod: 'directed' // hubsize, directed
- }
- },
- physics:{
- enabled: false
-
- },
- interaction:{
- dragNodes:true,
- dragView: true,
- hideEdgesOnDrag: true,
- hideNodesOnDrag: false,
- selectConnectedEdges: true,
- selectable: true,
- multiselect:true,
- navigationButtons: true
-
- }
- };
- var network = new vis.Network(container, data, options);
-
-
- </script>
-
- </body>
- </html>
-
- </script>
- </body>
- </html>
|
