Home/ Questions/Q 8069131
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-05T12:55:19+00:00

To visualize a node graph Sigma.js looks fantastic. I tried some examples but can’t

  • 0

To visualize a node graph Sigma.js looks fantastic. I tried some examples but can’t get my graph to display. I used example code and tried to plug in my .gexf file, but nothing displays. This is what I took from the Sigma.js example :

function init() {
  // Instanciate sigma.js and customize rendering :
  var sigInst = sigma.init(document.getElementById('sigma-example')).drawingProperties({
    defaultLabelColor: '#fff',
    defaultLabelSize: 14,
    defaultLabelBGColor: '#fff',
    defaultLabelHoverColor: '#000',
    labelThreshold: 6,
    defaultEdgeType: 'curve'
  }).graphProperties({
    minNodeSize: 0.5,
    maxNodeSize: 5,
    minEdgeSize: 1,
    maxEdgeSize: 1
  }).mouseProperties({
    maxRatio: 32
  });

  // Parse a GEXF encoded file to fill the graph
  // (requires "sigma.parseGexf.js" to be included)
  sigInst.parseGexf('donornet.gexf');

  // Draw the graph :
  sigInst.draw();
}

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

I replaced the .gexf file with my own donornet.gexf file and saved it as donornet.js. I then used code from this example (from Max De Marzi), which I replaced with my donornet.js file:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <title>Donornet and Sigma.js Example</title>
    <script type="text/javascript" src="sigma.min.js"></script>
    <script type="text/javascript" src="sigma.parseGexf.js"></script>
    <script type="text/javascript" src="sigma.forceatlas2.js"></script>
    <link type="text/css" rel="stylesheet" href="neo_sigma.css"/>
  </head>
  <body>
    <h1>Donornet and Sigma.js Example</h1>
        <div class="buttons-container">
        <button class="btn" id="stop-layout">Stop Layout</button>
        <button class="btn" id="rescale-graph">Rescale Graph</button>
    </div>
        <div class="span12 sigma-parent" id="sigma-example-parent">
    <div class="sigma-expand" id="sigma-example"></div>
    </div>
    <script type="text/javascript" src="donornet.js"></script>
  </body>
</html>

All files are in the same folder. parseGexf.js is in the same folder as donornet.js and donornet.gexf.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    You don’t have to save .gexf file as a .js file. Just leave it as a gexf file and upload it into the script’s folder. Remove the line with <script src="donornet.js">. Try to run again. If it doesn’t work, also remove the buttons div. Check out the source on http://noduslabs.com/socialplayer/smmrussia/

    • 0