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.
2056 Commits
33 Branches
475 MiB
Tree: 6c502fb0e1
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from '6c502fb0e1'
${ noResults }
jrtechs-vis/examples/network/nodeStyles/shapesWithDashedBorders.html

72 lines
3.3 KiB
Raw Normal View History

Added a shapeProperties object allowing configuration of shapes. Replaced dashes property in options.js with a shapeProperties object containing a borderDashes property. Replaced dashes property in defaultOptions in NodesHandler.js with shapeProperties object having its borderDashes property set to false. Created implementations of enableBorderDashes and disableBorderDashes functions in NodeBase.js Updated CircleImageBase to use enableBorderDashes and disableBorderDashes for enabling/disabling dashed borders. Added to ShapeBase enableBorderDashes and disableBorderDashes calls to allow all shapes that have borders to have the dashed borders feature. Updated example demonstrating how to apply the dashed border to a circularImage node Created example demonstrating how to apply the dashed border to a all shapes that support dashed borders. Updated documentation explaining the usage of the shapeProperties.
9 years ago
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
 
  1. <!doctype html>
  2. <html>
  3. <head>
  4.   <title>Network | Shapes</title>
  5. 

  6.   <style type="text/css">
  7.     #mynetwork {
  8.       width: 1000px;
  9.       height: 800px;
  10.       border: 1px solid lightgray;
  11.     }
  12.   </style>
  13. 

  14.   <script type="text/javascript" src="../../../dist/vis.js"></script>
  15.   <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
  16. 

  17.   <script type="text/javascript">
  18.     var nodes = null;
  19.     var edges = null;
  20.     var network = null;
  21. 

  22.     function draw() {
  23.       nodes = [
  24.         {id: 1,  label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
  25.         {id: 2,  label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
  26.         {id: 3,  label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
  27.         {id: 4,  label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
  28.         {id: 5,  label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
  29.         {id: 6,  label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
  30.         {id: 7,  label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
  31.         {id: 8,  label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
  32.         {id: 9,  label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
  33.         {id: 10, label: 'text',    shape: 'text'},
  34.         {id: 11, label: 'star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}},
  35.         {id: 21, font:{size:30},          label: 'big circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
  36.         {id: 22, font:{size:30},          label: 'big ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
  37.         {id: 23, font:{size:30},          label: 'big database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
  38.         {id: 24, font:{size:30},          label: 'big box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
  39.         {id: 25, font:{size:30}, size:40, label: 'big diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
  40.         {id: 26, font:{size:30}, size:40, label: 'big dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
  41.         {id: 27, font:{size:30}, size:40, label: 'big square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
  42.         {id: 28, font:{size:30}, size:40, label: 'big triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
  43.         {id: 29, font:{size:30}, size:40, label: 'big triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
  44.         {id: 30, font:{size:30},          label: 'big text',    shape: 'text'},
  45.         {id: 31, font:{size:30}, size:40, label: 'big star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}}
  46.       ];
  47. 

  48.       edges = [
  49.       ];
  50. 

  51.       // create a network
  52.       var container = document.getElementById('mynetwork');
  53.       var data = {
  54.         nodes: nodes,
  55.         edges: edges
  56.       };
  57.       var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
  58.       network = new vis.Network(container, data, options);
  59.     }
  60.   </script>
  61.   <script src="../../googleAnalytics.js"></script>
  62. 

  63. <body onload="draw()">
  64. 

  65. <p>
  66.   Nodes can have all sorts of shapes. Note the exception where the nodes with text inside and the text type's size are determined by the font size, not the node size.
  67. </p>
  68. <div id="mynetwork"></div>
  69. 

  70. <div id="info"></div>
  71. </body>
  72. </html>