UNPKG

2.09 kBHTMLView Raw
1<!doctype html>
2<html>
3<head>
4 <title>Network | Basic usage</title>
5
6 <script type="text/javascript" src="../../../dist/vis-network.min.js"></script>
7 <link href="../../../dist/vis-network.min.css" rel="stylesheet" type="text/css" />
8
9 <style type="text/css">
10 #mynetwork {
11 width: 600px;
12 height: 540px;
13 border: 1px solid lightgray;
14 }
15 </style>
16</head>
17<body>
18
19<p>
20 The types of endpoints.
21 The default is <code>'arrow'</code>.
22</p>
23<p id="arrow_type_list"></p>
24
25<div id="mynetwork"></div>
26
27<script type="text/javascript">
28 var arrow_types = [
29 'arrow', 'bar', 'circle', 'box', 'crow', 'curve', 'inv_curve',
30 'diamond', 'triangle', 'inv_triangle', 'vee'
31 ];
32
33 // update list of arrow types in html body
34 var nof_types = arrow_types.length;
35 var list_contents = [];
36 for(var i = 0; i < nof_types; i++) {
37 list_contents.push("<code>'" + arrow_types[i] + "'</code>");
38 }
39 var mylist = document.getElementById("arrow_type_list");
40 mylist.innerHTML = list_contents.join(", ");
41
42 // create an array with nodes
43 var node_attrs = new Array();
44 var nodes = arrow_types.slice();
45 nodes.push("end");
46 console.log(nodes);
47 var nof_nodes = nodes.length;
48 for(var i = 0; i < nof_nodes; i++) {
49 node_attrs[i] = {
50 id: i+1,
51 label: nodes[i]
52 };
53 }
54
55 var nodes = new vis.DataSet(node_attrs);
56
57 // create an array with edges
58 var edge_attrs = new Array();
59 var nof_edges = nof_nodes - 1;
60 for(var i = 0; i < nof_edges; i++) {
61 edge_attrs[i] = {
62 from: i+1, to: i+2, arrows: {
63 to: {
64 enabled: true,
65 type: arrow_types[i]
66 }
67 }
68 }
69 }
70
71 var edges = new vis.DataSet(edge_attrs);
72
73 // create a network
74 var container = document.getElementById('mynetwork');
75 var data = {
76 nodes: nodes,
77 edges: edges
78 };
79
80 var options = {
81/*
82 // Enable this to make the endpoints smaller/larger
83 edges: {
84 arrows: {
85 to: {
86 scaleFactor: 5
87 }
88 }
89 }
90*/
91 };
92
93 var network = new vis.Network(container, data, options);
94</script>
95
96
97</body>
98</html>