I'm trying remove (or clean a canvas) from my div, but the event kill only removes the properties of the element but not the image. What I can do? This is my code:

var s = new sigma('container');
    s.graph
    .addNode({
      id: 'n0',
      label: 'Start',
      x: 0,
      y: 0.5,
      size: 1,
      color: '#f00'
    })
    .addNode({
      id: 'n1',
      label: 'End',
      x: 1,
      y: 0.5,
      size: 1,
      color: '#00f'
    })
    .addEdge({
      id: 'e0',
      source: 'n0',
      target: 'n1'
    });

    s.settings({
      edgeColor: 'default',
      defaultEdgeColor: 'grey'
    });

    s.refresh();


    $(function(){
      $("#shape").click(function(){

        //s.kill();
        //s = new sigma('container');
        s.graph
        .addNode({
          id: 'n3',
          label: 'Start',
          x: 0,
          y: 0,
          size: 1,
          color: '#f00'
        })
        .addNode({
          id: 'n4',
          label: 'End',
          x: 1,
          y: 1,
          size: 1,
          color: '#00f'
        })
        .addEdge({
          id: 'e1',
          source: 'n3',
          target: 'n4'
        });

        s.settings({
          edgeColor: 'default',
          defaultEdgeColor: 'grey'
        });



        s.refresh();
        console.log("added!");
      });
    });

I'm trying remove (or clean a canvas) from my div, but the event kill only removes the properties of the element but not the image. What I can do? This is my code:

var s = new sigma('container');
    s.graph
    .addNode({
      id: 'n0',
      label: 'Start',
      x: 0,
      y: 0.5,
      size: 1,
      color: '#f00'
    })
    .addNode({
      id: 'n1',
      label: 'End',
      x: 1,
      y: 0.5,
      size: 1,
      color: '#00f'
    })
    .addEdge({
      id: 'e0',
      source: 'n0',
      target: 'n1'
    });

    s.settings({
      edgeColor: 'default',
      defaultEdgeColor: 'grey'
    });

    s.refresh();


    $(function(){
      $("#shape").click(function(){

        //s.kill();
        //s = new sigma('container');
        s.graph
        .addNode({
          id: 'n3',
          label: 'Start',
          x: 0,
          y: 0,
          size: 1,
          color: '#f00'
        })
        .addNode({
          id: 'n4',
          label: 'End',
          x: 1,
          y: 1,
          size: 1,
          color: '#00f'
        })
        .addEdge({
          id: 'e1',
          source: 'n3',
          target: 'n4'
        });

        s.settings({
          edgeColor: 'default',
          defaultEdgeColor: 'grey'
        });



        s.refresh();
        console.log("added!");
      });
    });

• javascript
• sigma.js

4 Answers 4

There's surely a better way to do this, but I have the same problem. I solved it by pletely removing the DOM element containing the graph, and then recreating it:

HTML:

<div id="graph-container">
    <div id="graph"></div>
</div>

JavaScript:

var sigma_graph = null; 

function create_graph() {
    sigma_graph = new sigma({ ... });
    ... populate graph ... 
}

function refresh_graph() {
    // to delete & refresh the graph
    var g = document.querySelector('#graph');
    var p = g.parentNode;
    p.removeChild(g);
    var c = document.createElement('div');
    c.setAttribute('id', 'graph');
    p.appendChild(c);

    create_graph(); 
}

Note that I'm not using jQuery, otherwise it would have been something like:

$('#graph').remove(); 
$('#graph-container').html('<div id="graph"></div>'); 

While this method seems to work, I can't say if it's a good idea or not. (I'm using the canvas renderer, if that matters.)

You can re-use instances of sigma, you don't need to kill the instance pletely. I had the same problem and this is how I solved it. Just have one sigma instance and clear it whenever you want a new graph.

s = new sigma({...});

//do stuff with the graph.

function clear_graph() {
    //this gets rid of all the ndoes and edges
    s.graph.clear();
    //this gets rid of any methods you've attached to s.
    s.graph.kill();
};

After clearing graph call refresh:

s.graph.clear();
s.refresh();

I'm using jquery

$("#graph").empty();