Creating a graph in VivaGraphJS with webgl
Create
a graph with user id edges and for data
By
definition, a Graph is a collection of nodes (vertices) and links
(also called edges - identified pairs of nodes). In VivaGraph.JS
nodes can be any object e.g. a string, a number, a function, another
graph or object, and so on.
The
graph
g
can be grown in two ways. You can add one
node at a time:
g.addNode('1','User
name 1');
g.addNode('2','User
name 2');
Now
graph
g
contains two nodes:1and
2. You can also use addLink()method
to grow a graph. Calling this method with nodes which are not present
in the graph creates them,If nodes already present in the graph
'addLink()' makes them connected
g.addLink('1',
'2');
and
at the end we add render loop
var
renderer = Viva.Graph.View.renderer(g);
renderer.run();
here
is the final output when loaded on the onload function for the html
page , this is for the two users from above
we can add other nodes for example 3
g.addNode('3','User name 3');
and then create the links between them
g.addLink('2', '3');
g.addLink('3', '1');
g.addNode('3','User name 3');
and then create the links between them
g.addLink('2', '3');
g.addLink('3', '1');
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="./dist/vivagraph.js"></script> | |
| <script type='text/javascript'> | |
| function onLoad() { | |
| var g = Viva.Graph.graph(); | |
| g.addNode('1','User name 1'); | |
| g.addNode('2','User name 2'); | |
| g.addNode('3','User name 3'); | |
| g.addLink('1', '2'); | |
| g.addLink('2', '3'); | |
| g.addLink('3', '1'); | |
| var renderer = Viva.Graph.View.renderer(g); | |
| renderer.run(); | |
| //list each nodes from the graph | |
| g.forEachNode(function(node){ | |
| console.log(node.id, node.data); | |
| }); | |
| // show the connected nodes with user id 1 | |
| g.forEachLinkedNode('1', function(linkedNode, link){ | |
| console.log("Connected node: ", linkedNode.id, linkedNode.data); | |
| console.dir(link); // link object itself | |
| }); | |
| } | |
| </script> | |
| </head> | |
| <body onload="onLoad()"> | |
| </body> | |
| </html> |
No comments:
Post a Comment