Inserting elements to a div means Java Script sigma.js library

StackOverflow https://stackoverflow.com/questions/19792171

  •  04-07-2022
  •  | 
  •  

Question

I'm testing a Java Script library for graphs visualization. Based on the introductory docs I tried to make a simple graph display on web page.

This is what docs say:

Easy to use
Here is the minimal code to create an instance:

var sigRoot = document.getElementById('sig');
var sigInst = sigma.init(sigRoot);
sigInst.addNode('hello',{
  label: 'Hello',
  color: '#ff0000'
}).addNode('world',{
  label: 'World !',
  color: '#00ff00'
}).addEdge('hello_world','hello','world').draw();

This is my HTML webpage:

<!DOCTYPE html>

<html>

<head>
    <title>Testing graphs</title>
    <script src="sigma.min.js"></script>
    <script src="jquery1102.js"></script>
</head>

<body>

    <div id="sig"></div>

    <script type="text/javascript">

    window.onload = loadGraph();

    function loadGraph () {

        var sigRoot = document.getElementById('sig');
        var sigInst = sigma.init(sigRoot);
        sigInst.addNode('hello',{
          label: 'Hello',
          color: '#ff0000'
        }).addNode('world',{
          label: 'World !',
          color: '#00ff00'
        }).addEdge('hello_world','hello','world').draw();
    }
    </script>

</body>
</html>

So, I'm assuming graph would display in some div area and executed once page has loaded. However nothing gets displayed on and console isn't claiming for any bug. Do I even need to use the HTML5 canvas?

Was it helpful?

Solution

It is working, but you need to provide a height and width to the div containing the graph.

<div id="sig" style="width:500px;height:500px;border:1px solid black"></div>

Secondly, the simple example is not very good because the two nodes will be placed on top of each other. So, you might also want to provide x and y properties to each node.

sigInst.addNode('hello',{
  label: 'Hello',
  color: '#ff0000',
    x: Math.random(),
    y: Math.random()    
}).addNode('world',{
  label: 'World !',
  color: '#00ff00',
    x: Math.random(),
    y: Math.random()
}).addEdge('hello_world','hello','world').draw();

Here's a jsfiddle:

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top