Alexander Wunschik
8 years ago
1 changed files with 55 additions and 0 deletions
Unified View
Diff Options
+ 55
- 0
examples/network/edgeStyles/arrowTypes.html
View File
| @ -0,0 +1,55 @@ | |||||
| <!doctype html> | |||||
| <html> | |||||
| <head> | |||||
| <title>Network | Basic usage</title> | |||||
| <script type="text/javascript" src="../../../dist/vis.js"></script> | |||||
| <link href="../../../dist/vis.css" rel="stylesheet" type="text/css" /> | |||||
| <style type="text/css"> | |||||
| #mynetwork { | |||||
| width: 600px; | |||||
| height: 400px; | |||||
| border: 1px solid lightgray; | |||||
| } | |||||
| </style> | |||||
| </head> | |||||
| <body> | |||||
| <p> | |||||
| There two type of liner endings. The classical "arrow" (default) and "circle". | |||||
| </p> | |||||
| <div id="mynetwork"></div> | |||||
| <script type="text/javascript"> | |||||
| // create an array with nodes | |||||
| var nodes = new vis.DataSet([ | |||||
| {id: 1, label: 'X'}, | |||||
| {id: 2, label: 'Y'}, | |||||
| {id: 3, label: 'Z'} | |||||
| ]); | |||||
| // create an array with edges | |||||
| var edges = new vis.DataSet([ | |||||
| {from: 1, to: 2, arrows:'to'}, | |||||
| {from: 2, to: 3, arrows:{ | |||||
| to: { | |||||
| type: 'circle' | |||||
| } | |||||
| }}, | |||||
| ]); | |||||
| // create a network | |||||
| var container = document.getElementById('mynetwork'); | |||||
| var data = { | |||||
| nodes: nodes, | |||||
| edges: edges | |||||
| }; | |||||
| var options = {}; | |||||
| var network = new vis.Network(container, data, options); | |||||
| </script> | |||||
| <script src="../../googleAnalytics.js"></script> | |||||
| </body> | |||||
| </html> | |||||