javascript - Can't display any graph with Sigma.js

I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 patible.

The problem is that I can't display any graph example from Sigma.js web page, even when I use the minimal code that the author has on Sigma.js's homepage. I even copy-pasted entire web pages, with right click-view code, but in vain (like this). I have pasted all the necessary files in the same folder that the simple .html file is located (css files, js files and even the .gexf file that the example needs) but I only get a page with a black rectangle and nothing more. The graph isn't displayed. What am I doing wrong?

Do I need to first build the sigma.js file, as the author mentions in the code repository of the library in GitHub? I need this tool to visualize the graph (I'm going to feed the graph with data on the fly) but I can't even experiment with some simple code! I even followed that "guide" and did every step but I can't anything working.

Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).

I want to visualize a large network graph on a web interface. After a few days of search, I decided to use Sigma.js because it looks simple and it's HTML5 patible.

Webstudio: Microsoft Expression Web 4 and OS: Windows 8 Pro (I tried opening the web pages in IE10, FF17 and Chrome 23).

Share Improve this question edited Jan 9, 2014 at 13:43 Duncan Jones 69.4k32 gold badges201 silver badges259 bronze badges asked Nov 28, 2012 at 17:56 Lefteris008 9063 gold badges11 silver badges29 bronze badges

This is a question that would be much more appropriate for the Sigma.js forum. – thatidiotguy Commented Nov 28, 2012 at 17:57
@PiXel1225: Can you maybe accept an answer if it worked out for you? – MERose Commented Jan 18, 2016 at 22:00
1 @MERose: All answers were published 6 months to a year after my original question. After all that time I have obviously found my answer and now I couldn't remember what went wrong to mark something as possible answer or not. – Lefteris008 Commented Jan 20, 2016 at 14:28

Add a ment |

4 Answers 4

Sorted by: Reset to default 8

The div you want to have your graph has to be absolute positioned. I think it's a canvas issue.

so the html

<!DOCTYPE html>
<html>
  <head>
    <script src="http://sigmajs/js/sigma.min.js"></script>
    <script src="/js/sigmatest.js"></script>
    <link rel="stylesheet" href="/css/sigma.css">
  </head>
  <body>
    <div id="sigma-parent">
      <div id="sigma-example">
      </div>
    </div>
  </body>
</html>

the css

#sigma-parent {
  width: 500px;
  height: 500px;
  position: relative;
}    

#sigma-example {
  position: absolute;
  width: 100%;
  height: 100%;
}

the js in sigmatest.js

function init() {
  var sigRoot = document.getElementById('sigma-example');
  var sigInst = sigma.init(sigRoot);
  sigInst.addNode('hello',{
    label: 'Hello',
    x: 10,
    y: 10,
    size: 5,
    color: '#ff0000'
  }).addNode('world',{
    label: 'World !',
    x: 20,
    y: 20,
    size: 3,
    color: '#00ff00'
  }).addEdge('hello_world','hello','world').draw();
}

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

This probably won't help as many people, but in my case it was simply that I didn't specify x or y properties for each node. I was trying to use the forceAtlas2 algorithm to automatically "place" my nodes, not realizing they had to be drawn in some position first in order for the layout to then apply.

Make sure you have downloaded this file http://sigmajs/data/arctic.gexf and refered the path properly in the code

Sigma js has browser patibilty issue. Try updating the bowser or use some other browser.

I work with firefox and it works fine.

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Can't display any graph with Sigma.js - Stack Overflow

4 Answers 4

与本文相关的文章

评论列表(0)