jrtechs
/
jrtechs-vis
mirror of https://github.com/jrtechs/vis.git
1
0
Fork 0
Code Issues 0 Releases 82 Wiki Activity
vis.js is a dynamic, browser-based visualization library
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1842 Commits
33 Branches
1.5 GiB
Tree: 041c2c08ad
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '041c2c08ad'
${ noResults }
jrtechs-vis/examples/network/categories/nodeStyles/customGroups.html

134 lines
3.7 KiB
Raw Normal View History

bugfixes, start of reorganisation of examples
9 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.     <title>Network | Custom Groups</title>
  5. 

  6.     <style>
  7.         body {
  8.             color: #d3d3d3;
  9.             font: 12pt arial;
  10.             background-color: #222222;
  11.         }
  12. 

  13.         #mynetwork {
  14.             width: 800px;
  15.             height: 800px;
  16.             border: 1px solid #444444;
  17.             background-color: #222222;
  18.         }
  19.     </style>
  20. 

  21.     <script type="text/javascript" src="../../../../dist/vis.js"></script>
  22.     <link href="../../../../dist/vis.css" rel="stylesheet" type="text/css"/>
  23.     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
  24. 

  25.     <script src="../../../googleAnalytics.js"></script>
  26. </head>
  27. 

  28. <body>
  29. 

  30. <div id="mynetwork"></div>
  31. <script type="text/javascript">
  32.     var color = 'gray';
  33.     var len = undefined;
  34. 

  35.     var nodes = [
  36.         {id: 0, label: "0", group: 'source'},
  37.         {id: 1, label: "1", group: 'icons'},
  38.         {id: 2, label: "2", group: 'icons'},
  39.         {id: 3, label: "3", group: 'icons'},
  40.         {id: 4, label: "4", group: 'icons'},
  41.         {id: 5, label: "5", group: 'icons'},
  42.         {id: 6, label: "6", group: 'icons'},
  43.         {id: 7, label: "7", group: 'icons'},
  44.         {id: 8, label: "8", group: 'icons'},
  45.         {id: 9, label: "9", group: 'icons'},
  46.         {id: 10, label: "10", group: 'mints'},
  47.         {id: 11, label: "11", group: 'mints'},
  48.         {id: 12, label: "12", group: 'mints'},
  49.         {id: 13, label: "13", group: 'mints'},
  50.         {id: 14, label: "14", group: 'mints'},
  51.         {id: 15, group: 'dotsWithLabel'},
  52.         {id: 16, group: 'dotsWithLabel'},
  53.         {id: 17, group: 'dotsWithLabel'},
  54.         {id: 18, group: 'dotsWithLabel'},
  55.         {id: 19, group: 'dotsWithLabel'},
  56.         {id: 20, label: "diamonds", group: 'diamonds'},
  57.         {id: 21, label: "diamonds", group: 'diamonds'},
  58.         {id: 22, label: "diamonds", group: 'diamonds'},
  59.         {id: 23, label: "diamonds", group: 'diamonds'},
  60.     ];
  61.     var edges = [
  62.         {from: 1, to: 0},
  63.         {from: 2, to: 0},
  64.         {from: 4, to: 3},
  65.         {from: 5, to: 4},
  66.         {from: 4, to: 0},
  67.         {from: 7, to: 6},
  68.         {from: 8, to: 7},
  69.         {from: 7, to: 0},
  70.         {from: 10, to: 9},
  71.         {from: 11, to: 10},
  72.         {from: 10, to: 4},
  73.         {from: 13, to: 12},
  74.         {from: 14, to: 13},
  75.         {from: 13, to: 0},
  76.         {from: 16, to: 15},
  77.         {from: 17, to: 15},
  78.         {from: 15, to: 10},
  79.         {from: 19, to: 18},
  80.         {from: 20, to: 19},
  81.         {from: 19, to: 4},
  82.         {from: 22, to: 21},
  83.         {from: 23, to: 22},
  84.         {from: 23, to: 0},
  85.     ]
  86. 

  87.     // create a network
  88.     var container = document.getElementById('mynetwork');
  89.     var data = {
  90.         nodes: nodes,
  91.         edges: edges
  92.     };
  93.     var options = {
  94.         nodes: {
  95.             shape: 'dot',
  96.             size: 20,
  97.             font: {
  98.                 size: 15,
  99.                 color: '#ffffff'
  100.             },
  101.             borderWidth: 2
  102.         },
  103.         edges: {
  104.             width: 2
  105.         },
  106.         groups: {
  107.             diamonds: {
  108.                 color: {background:'red',border:'white'},
  109.                 shape: 'diamond'
  110.             },
  111.             dotsWithLabel: {
  112.                 label: "I'm a dot!",
  113.                 shape: 'dot',
  114.                 color: 'cyan'
  115.             },
  116.             mints: {color:'rgb(0,255,140)'},
  117.             icons: {
  118.                 shape: 'icon',
  119.                 icon: {
  120.                     face: 'FontAwesome',
  121.                     code: '\uf0c0',
  122.                     size: 50,
  123.                     color: 'orange'
  124.                 }
  125.             },
  126.             source: {
  127.                 color:{border:'white'}
  128.             }
  129.         }
  130.     };
  131.     network = new vis.Network(container, data, options);
  132. </script>
  133. </body>
  134. </html>