Hello,
I am new to sigma.js and javascript and I am trying to visualise a simple graph step by step. I want to click on a button and get a new node that connects to the old one so i could see how the network expands.
I have a dictionary with 3 edges and 3 nodes but i dont know how to display only one at a time.
var dictionary={
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
{
"id": "n2",
"label": "And a last one",
"x": 1,
"y": 3,
"size": 1
}
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
{
"id": "e1",
"source": "n1",
"target": "n2"
},
{
"id": "e2",
"source": "n2",
"target": "n0"
}
]
}
and to create the graph i use sigma.js:
function buildGraph(){
var s = new sigma({
graph: dictionary,
container: 'graph-container',
});
s.refresh();
}
(Fair warning: I have never used Sigma.js, and this response is based upon literally 10 seconds of looking at the documentation.)
So instead of loading the entire dictionary to start with, define an empty sigma. (var s = new sigma()), and then bind a button push to the addNode and addEdge functions as necessary.
do you mean something like this:
function buildGraph(){
var newSigma=new sigma();
for (var i = 0; i <dictionary(nodes).length; i++) {
for (var i = 0; i <dictionary(edges).length; i++) {
newSigma.addEdge(dictionary(edges)[i]);
}
newSigma.addNode(dictionary(nodes)[i])
}
s.refresh();
}
Well no, I expect that would lead to a series of complaints as the graph tried to add edges to nodes that don’t exist yet.
Let’s take your example dictionary.
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
{
"id": "n2",
"label": "And a last one",
"x": 1,
"y": 3,
"size": 1
}
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
{
"id": "e1",
"source": "n1",
"target": "n2"
},
{
"id": "e2",
"source": "n2",
"target": "n0"
}
]
Define for me ‘step by step’. What constitutes Step 0 (initial state, if any)? Step 1? Step 2? Step 3?
How flexible does the code need to be? What happens if I add another node?
When do you want to advance to the next step?
i want step 1 to display edge 1,sep 2 edge2… For example, I have an empty canvas and when i click the button for the first time i want it to display only edge1. The main idea is later to see how the graph grows is i have many nodes.
so your initial state is to have all the nodes already on the graph, and then step through adding edges one by one?
and when you click the button, you want it to advance one step (add one edge)?
Yes, so I can see how they connect to each other.
Ok, so here’s how I would do it. There are other ways.
//Initial state.
var newSigma = new sigma({nodes: dictionary.nodes})
document.getElementById("advanceStepButton").addEventListener("click", function() {
var edgeinplace = newSigma.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
newSigma.addEdge(dictionary.edges[edgeinplace]);
newSigma.refresh();
}
}
EDIT: forgot the refresh. Not sure if addEdge automatically invokes it.
It’s not working but thanks for the insight. I will try to figure it out 
Well… it should work as far as i can see… Define ‘not working’ and maybe we can help.
Hello, nothing shows up when i press the button.
Show us your current code?
<script type="text/javascript">
var dictionary={
"nodes": [
{
"id": "n0",
"label": "A node",
"x": 0,
"y": 0,
"size": 3
},
{
"id": "n1",
"label": "Another node",
"x": 3,
"y": 1,
"size": 2
},
{
"id": "n2",
"label": "And a last one",
"x": 1,
"y": 3,
"size": 1
}
],
"edges": [
{
"id": "e0",
"source": "n0",
"target": "n1"
},
{
"id": "e1",
"source": "n1",
"target": "n2"
},
{
"id": "e2",
"source": "n2",
"target": "n0"
}
]
}
//addEdge
//initiate a new graph with sigma
function buildGraph(){
var s = new sigma({
graph: dictionary,
container: 'graph-container',
});
s.refresh();
console.log();
}
function step(){
//Initial state.
var newSigma = new sigma({nodes: dictionary.nodes})
document.getElementById("advanceStepButton").addEventListener("click", function() {
var edgeinplace = newSigma.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
newSigma.addEdge(dictionary.edges[edgeinplace]);
newSigma.refresh();
}
}
}
</script>
<button onclick="buildGraph();">start</button>
<button id="advanceStepButton" onclick="step();">next</button>
Ah okay. It’s mostly a question of pointers at this point.
Also referencing the button.
We need the reference to the sigma object to be consistent. Couple of ways to go about it, but its 5 AM so i’ll go with the laziest way my brain can come up with, and shift the declaration of the sigma to a global space.
Since you’ve said the butotn will onclick call the step function, we dont need the eventlistener.
//Global Declaration for Sigma
var mySigma;
//initiate a new graph with sigma
function buildGraph(){
mySigma = new sigma({
graph: dictionary.nodes,
container: 'graph-container',
});
mySigma.refresh();
}
function step(){
if(!mySigma) { return; } //Don't do anything until the nodes have been set up.
var edgeinplace = mySigma.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
mySigma.addEdge(dictionary.edges[edgeinplace]);
mySigma.refresh();
}
}
I tried it but again only the buildGraph() function works and it displays the whole graph.
shouldnt be possible for it to display the whole graph, if it doesnt know the edges…lets try…
//Global Declaration for Sigma
var mySigma;
//initiate a new graph with sigma
function buildGraph(){
mySigma = new sigma({
graph: { "nodes":dictionary.nodes,"edges":[] },
container: 'graph-container',
});
mySigma.refresh();
}
function step(){
console.log('step');
if(!mySigma) { return; } //Don't do anything until the nodes have been set up.
var edgeinplace = mySigma.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
mySigma.addEdge(dictionary.edges[edgeinplace]);
mySigma.refresh();
}
}
You should see the console tell you ‘step’ every time you push the button.
Okay, now it display all nodes at once but no edges.
and when you click the step button, does it say step in the console?
Hmm. Okay… the functions are buried further than i thought…
function step(){
if(!mySigma) { return; } //Don't do anything until the nodes have been set up.
var edgeinplace = mySigma.graph.edges().length;
if(edgeinplace < dictionary.edges.length) { //Prevent trying to push the button too many times.
mySigma.graph.addEdge(dictionary.edges[edgeinplace]);
mySigma.refresh();
}
}
