CODEWITHSUNDEEP
javascriptgraph-visualizationsigma.js
Guillem Vicens
Guillem Vicens

Reputation: 3996

How to pass preexisting sigma instance to sigma.parsers.gexf

In my website I am visualizing a GEXF graph with sigma.js by using the sigma.parsers.gexf to locate the container and load the graph into it.

The Javascript code is the same as you can find in the sigma.js website:

<script>
    sigma.parsers.gexf(
        path/to/gexfFile.gexf,
        { 
           container: 'sigma-container'
        },
        function(s) {
        }
    );
</script>

This works fine, but now I need to be able to load multiple graphs. In order to do this I wanted to create first a sigma instance to use it when calling sigma.parsers.gexf as explained in this function's code.

So I create a sigma instance before and pass it to the parser function. Problem is, when I try to do so, the graph is simply not drawn and no error is shown in the firebug console.

My testing code is as following:

HTML

<html>
<head>
    <script src="sigma.min.js" type="text/javascript"></script>
    <script src="plugins/sigma.parsers.gexf.min.js" type="text/javascript"></script>
    <script src="myLibrary.js" type="text/javascript"></script>
</head>
<body>
    <select id="graphSelector" onChange="showGraph(this.value)">
        <option id="defaultValue" value="AENUI" selected>Select...</option> 
        <option value="AENUI">AENUI</option>
        <option value="ICER">ICER</option>
    </select>   
    <div id="foo">
        <div class="sigma-parent">
            <div id="sigma-container" class="sigma-expand"></div>
        </div>
    </div>
    <div style="clear:both;"></div>
</body> 
</html>

myLibrary.js

var actualGraph;

function showGraph(selectedNetwork) {

    var selectedFile;

    if ((typeof selectedNetwork != 'undefined') && (selectedNetwork !== null)) {
        selectedFile = selectedNetwork;
    } else {
        selectedFile = 'AENUI';
    }

    var path = window.location.pathname;
    path = path.substring(0, path.lastIndexOf('/') + 1);

    sigma.parsers.gexf(
        path + selectedFile + '.gexf',
        actualGraph, //if I change this line to  {container: 'sigma-container'} it works
        function(s) {
        }
      );
}



/**
* @method InitForm
*/  
function initForm(){
    actualGraph = new sigma({container: 'sigma-container'});
    var network = document.getElementById("graphSelector").value;
    show(network);  
}



if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded', initForm, false);
} else {
  window.onload = initForm;
}

Additional notes:

Upvotes: 2

Views: 753

Answers (1)

Guillem Vicens
Guillem Vicens

Reputation: 3996

Finally got it working after asking at the sigma.js forums (check this link for more information). The necessary change was to call refresh() on my preexisting instance.

This can be done by changing the showGraph function to following:

var actualGraph;

function showGraph(pathToFile) {

    var selectedFile;

    if ((typeof selectedNetwork != 'undefined') && (selectedNetwork !== null)) {
        selectedFile = selectedNetwork;
    } else {
        selectedFile = 'AENUI';
    }

    var path = window.location.pathname;
    path = path.substring(0, path.lastIndexOf('/') + 1);

    if (actualGraph) {
        sigma.parsers.gexf( 
            path + selectedFile + '.gexf',
            actualGraph,
            function(s) {
               s.refresh();                   
            }
        );    
    } else {    
        sigma.parsers.gexf(
            path + selectedFile + '.gexf',
            {container: 'sigma-container'},
            function(s) {
                actualGraph = s;
            }
        );
    }   
}

Upvotes: 2

Related Questions