Geek Answers Handbook

Unable to display graph using Sigma.js

I want to visualize a large network diagram on a web interface. After several days of searching, I decided to use Sigma.js because it looks simple and is compatible with HTML5.

The problem is that I cannot display any example graph from the Sigma.js webpage, even if I use the minimal code that the author has on the Sigma.js homepage. I even copied all the web pages using the right mouse button code, but in vain ( like this ). I put all the necessary files in the same folder that contains a simple .html file (css files, js files and even the .gexf file, which is needed in this example), but I get only a page with a black rectangle and nothing more. The graph is not displayed. What am I doing wrong?

Do I need to create the sigma.js file first, as the author mentions in the library code repository in GitHub? I need this tool to visualize the graph (I'm going to copy the graph with the data on the fly), but I can’t even experiment with some simple code! I even followed this “guide” and took every step, but I can’t work.

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

+4
source share
3 answers

You want your chart to be absolute . I think this is a problem with the canvas.

therefore html

 <!DOCTYPE html> <html> <head> <script src="http://sigmajs.org/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>

css

 #sigma-parent { width: 500px; height: 500px; position: relative; } #sigma-example { position: absolute; width: 100%; height: 100%; }

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; }
+7
source

Make sure you download this file http://sigmajs.org/data/arctic.gexf and correctly specify the path in the code

0
source

Sigma js has a browser compatibility issue. Try updating your browser or using a different browser.

I work with firefox and it works great.

0
source

More articles:


All Articles