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 |
|
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 |
|
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 |
|
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 |
|
74 | var container = document.getElementById('mynetwork');
|
75 | var data = {
|
76 | nodes: nodes,
|
77 | edges: edges
|
78 | };
|
79 |
|
80 | var options = {
|
81 | /*
|
82 |
|
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>
|