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.
2104 Commits
33 Branches
1.5 GiB
Tree: e228ba9482
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'e228ba9482'
${ noResults }
jrtechs-vis/examples/network/nodeStyles/shapesWithDashedBorders.html

61 lines
2.4 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
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
​
Corrected the shapeProperties.borderDashes property type description Changed shapeProperties.borderDashes type description from "Object or Boolean" to Array or Boolean". Merged circularImageWithDashedBorder example into shapesWithDashedBorders example. Added enableBorderDashes and disableBorderDashes function calls to Database.js, Ellipse.js and Box.js, to enable/disable dashed borders.
9 years ago
​
​
​
​
​
​
​
​
​
​
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, font:{size:30},          label: 'circle',  shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
  25.         {id: 2, font:{size:30},          label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
  26.         {id: 3, font:{size:30},          label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
  27.         {id: 4, font:{size:30},          label: 'box',     shape: 'box'    , shapeProperties:{borderDashes:[5,5]}},
  28.         {id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
  29.         {id: 6, font:{size:30}, size:40, label: 'dot',     shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
  30.         {id: 7, font:{size:30}, size:40, label: 'square',  shape: 'square', shapeProperties:{borderDashes:[5,5]}},
  31.         {id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
  32.         {id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
  33.         {id: 10, font:{size:30}, size:40, label: 'star',    shape: 'star', shapeProperties:{borderDashes:[5,5]}},
  34.         {id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
  35.       ];
  36. 

  37.       edges = [
  38.       ];
  39. 

  40.       // create a network
  41.       var container = document.getElementById('mynetwork');
  42.       var data = {
  43.         nodes: nodes,
  44.         edges: edges
  45.       };
  46.       var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
  47.       network = new vis.Network(container, data, options);
  48.     }
  49.   </script>
  50.   <script src="../../googleAnalytics.js"></script>
  51. 

  52. <body onload="draw()">
  53. 

  54. <p>
  55.   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.
  56. </p>
  57. <div id="mynetwork"></div>
  58. 

  59. <div id="info"></div>
  60. </body>
  61. </html>