<!doctype html>
							 | 
						|
								<html>
							 | 
						|
								<head>
							 | 
						|
								  <title>Network | Arrows</title>
							 | 
						|
								
							 | 
						|
								  <style type="text/css">
							 | 
						|
								    body {
							 | 
						|
								      font: 10pt sans;
							 | 
						|
								    }
							 | 
						|
								    #mynetwork {
							 | 
						|
								      width: 600px;
							 | 
						|
								      height: 600px;
							 | 
						|
								      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">
							 | 
						|
								    // Called on page load
							 | 
						|
								    function draw() {
							 | 
						|
								      var nodes = [
							 | 
						|
								        {id: 1, label: 'arrows\nexamples'},
							 | 
						|
								        {id: 2, label: 'none'},
							 | 
						|
								        {id: 3, label: '"to"'},
							 | 
						|
								        {id: 4, label: '"from, to"'},
							 | 
						|
								        {id: 5, label: '"middle"'},
							 | 
						|
								        {id: 6, label: '{to: {scaleFactor: 2}}'}
							 | 
						|
								      ];
							 | 
						|
								      var edges = [
							 | 
						|
								        {from: 1, to: 2},
							 | 
						|
								        {from: 1, to: 3, arrows: 'to'},
							 | 
						|
								        {from: 1, to: 4, arrows: 'from, to'},
							 | 
						|
								        {from: 1, to: 5, arrows: 'middle'},
							 | 
						|
								        {from: 1, to: 6, arrows: {to: {scaleFactor: 2}}}
							 | 
						|
								      ];
							 | 
						|
								
							 | 
						|
								      // create the network
							 | 
						|
								      var container = document.getElementById('mynetwork');
							 | 
						|
								      var data = {
							 | 
						|
								        nodes: nodes,
							 | 
						|
								        edges: edges
							 | 
						|
								      };
							 | 
						|
								      var options = {
							 | 
						|
								        nodes: {
							 | 
						|
								          shape: 'box'
							 | 
						|
								        },
							 | 
						|
								        physics: {
							 | 
						|
								          barnesHut: {
							 | 
						|
								            springLength: 150
							 | 
						|
								          },
							 | 
						|
								          stabilization: false
							 | 
						|
								        }
							 | 
						|
								      };
							 | 
						|
								      var network = new vis.Network(container, data, options);
							 | 
						|
								    }
							 | 
						|
								  </script>
							 | 
						|
								  <script src="../googleAnalytics.js"></script>
							 | 
						|
								</head>
							 | 
						|
								
							 | 
						|
								<body onload="draw();">
							 | 
						|
								<p>
							 | 
						|
								  This example shows the different options for arrows.
							 | 
						|
								</p>
							 | 
						|
								
							 | 
						|
								<div id="mynetwork"></div>
							 | 
						|
								</body>
							 | 
						|
								</html>
							 |