1+ < html >
2+
3+ < head >
4+ < link rel ="stylesheet " href ="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css " type ="text/css " />
5+ < script type ="text/javascript " src ="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js "> </ script >
6+ < style type ="text/css ">
7+ # mynetwork {
8+ width : {{width}};
9+ height: {{height}};
10+ bor der: 1px solid lightgray;
11+ }
12+ </ style >
13+ </ head >
14+
15+ < body >
16+ < div id ="mynetwork "> </ div >
17+
18+
19+ < button onclick ="getNextData() "> Next Data!</ button >
20+
21+
22+ < input type ="button " onclick ="addNextData() " value ="add node dynamically "> < br />
23+
24+
25+ < script type ="text/javascript ">
26+ var row_index = 0 ;
27+ function addNextData ( ) {
28+ console . log ( row_index ) ;
29+ row_index ++ ;
30+ document . button_form . row . value = row_index ;
31+ }
32+
33+ </ script >
34+
35+ < script type ="text/javascript ">
36+
37+ var edges ;
38+ var network ;
39+ var container ;
40+ var options , data ;
41+ var edge_ids ;
42+
43+ function drawGraph ( ) {
44+
45+ var container = document . getElementById ( 'mynetwork' ) ;
46+
47+
48+
49+ { % if use_DOT % }
50+ alert ( "using DOT" ) ;
51+ var DOTstring = "{{dot_lang|safe}}" ;
52+ var parsedData = vis . network . convertDot ( DOTstring ) ;
53+
54+ data = {
55+ nodes : parsedData . nodes ,
56+ edges : parsedData . edges
57+ }
58+
59+
60+
61+ var options = parsedData . options ;
62+
63+ options . nodes = {
64+ shape : "dot"
65+ }
66+
67+
68+
69+ { % else % }
70+
71+
72+ var nodes = { { nodes| safe } } ;
73+
74+ edges = { { edges | safe } } ;
75+
76+ var e_values = [ ] ;
77+
78+
79+ console . log ( "edges: " + e_values ) ;
80+
81+ data = { nodes : nodes , edges : edges } ;
82+ var options = { { options| safe } } ;
83+
84+ { % endif % }
85+
86+ { % if widget % }
87+ var widgetFn = function ( option , path ) {
88+ if ( path . indexOf ( 'nodes' ) !== - 1 && option == 'size' ) {
89+ return true ;
90+ }
91+ return false ;
92+ } ;
93+
94+ options . configure . filter = widgetFn ;
95+ { % endif % }
96+
97+
98+
99+ network = new vis . Network ( container , data , options ) ;
100+ return network ;
101+
102+ }
103+
104+
105+ function getEdges ( ) {
106+ old_edges = { } ;
107+ for ( var i = 0 ; i < edges . length ; i ++ ) {
108+ old_edges [ i ] = edges [ i ] [ "width" ] ;
109+ }
110+ return old_edges ;
111+ }
112+
113+ function outputUpdate ( vol ) {
114+ document . querySelector ( '#volume' ) . value = vol ;
115+ updateEdges ( vol ) ;
116+ }
117+
118+ function updateEdges ( vol ) {
119+ //console.log("Updating edges based off original widths of " + JSON.stringify(edge_ids));
120+ for ( var i = 0 ; i < edges . length ; i ++ ) {
121+
122+ var originalVal = old_edges [ i ] ;
123+ //console.log("original value: " + originalVal);
124+ edges [ i ] [ "width" ] = originalVal + ( ( vol / 10 ) * originalVal ) ;
125+ //console.log("new edge width: " + edges[i]["width"]);
126+
127+ }
128+
129+ data . edges = edges ;
130+ //console.log(data);
131+ network . setData ( data ) ;
132+ }
133+
134+ new_network = drawGraph ( ) ;
135+ old_edges = getEdges ( ) ;
136+
137+
138+
139+ </ script >
140+
141+
142+
143+ </ body >
144+ </ html >
0 commit comments