Browse Source

added example

gh-pages
Alex de Mulder 9 years ago
parent
commit
759bfb6d45
1 changed files with 61 additions and 0 deletions
  1. +61
    -0
      examples/network/nodeStyles/shapesWithDashedBorders.html

+ 61
- 0
examples/network/nodeStyles/shapesWithDashedBorders.html View File

@ -0,0 +1,61 @@
<!doctype html>
<html>
<head>
<title>Network | Shapes</title>
<style type="text/css">
#mynetwork {
width: 1000px;
height: 800px;
border: 1px solid lightgray;
}
</style>
<script type="text/javascript" src="../../../dist/vis.js"></script>
<link href="../../../dist/vis.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
var nodes = null;
var edges = null;
var network = null;
function draw() {
nodes = [
{id: 1, font:{size:30}, label: 'circle', shape: 'circle' , shapeProperties:{borderDashes:[5,5]}},
{id: 2, font:{size:30}, label: 'ellipse', shape: 'ellipse', shapeProperties:{borderDashes:[5,5]}},
{id: 3, font:{size:30}, label: 'database',shape: 'database', shapeProperties:{borderDashes:[5,5]}},
{id: 4, font:{size:30}, label: 'box', shape: 'box' , shapeProperties:{borderDashes:[5,5]}},
{id: 5, font:{size:30}, size:40, label: 'diamond', shape: 'diamond', shapeProperties:{borderDashes:[5,5]}},
{id: 6, font:{size:30}, size:40, label: 'dot', shape: 'dot', shapeProperties:{borderDashes:[5,5]}},
{id: 7, font:{size:30}, size:40, label: 'square', shape: 'square', shapeProperties:{borderDashes:[5,5]}},
{id: 8, font:{size:30}, size:40, label: 'triangle',shape: 'triangle', shapeProperties:{borderDashes:[5,5]}},
{id: 9, font:{size:30}, size:40, label: 'triangleDown', shape: 'triangleDown', shapeProperties:{borderDashes:[5,5]}},
{id: 10, font:{size:30}, size:40, label: 'star', shape: 'star', shapeProperties:{borderDashes:[5,5]}},
{id: 11, font:{size:30}, size:40, label: 'circularImage', shape: 'circularImage', image: '../img/indonesia/4.png', shapeProperties: {borderDashes:[15,5]}},
];
edges = [
];
// create a network
var container = document.getElementById('mynetwork');
var data = {
nodes: nodes,
edges: edges
};
var options = {physics:{barnesHut:{gravitationalConstant:-4000}}};
network = new vis.Network(container, data, options);
}
</script>
<script src="../../googleAnalytics.js"></script>
<body onload="draw()">
<p>
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.
</p>
<div id="mynetwork"></div>
<div id="info"></div>
</body>
</html>

Loading…
Cancel
Save