title: Chrome freeze when refreshing graph with sigma.js
body: <p>I can't understand what is going wrong, sometimes, when i try to render the graph by clicking the "Generate Random Graph" button, my browser CPU jumps to 17% and the browser freezes. </p>
  
  <p>This is the webpage: <a href="http://summarify.com/randomideagenerator/" rel="nofollow">http://summarify.com/randomideagenerator/</a>
  You can find all the source here: <a href="https://github.com/alessiop86/display-random-concepts" rel="nofollow">https://github.com/alessiop86/display-random-concepts</a></p>
  
  <p>This is the javascript:</p>
  
  <pre><code>      // Self-executing wrapper
  (function ($) {
  
      Backbone.sync = function (method, model, success, error) {
          success();
      }
  
      /* Model */
      var Item = Backbone.Model.extend({
          defaults: {
              concept: 'description',
              displayChoice: 'random'
          }
      });
  
      var List = Backbone.Collection.extend({
          model: Item
      });
  
      /* End of model */
  
      /* Views */
  
      var ItemView = Backbone.View.extend({
  
          tagName: 'tr',
  
          events: {
              'click button.delete': 'remove',
              'change input[type=text]': 'conceptChanged',
              'click input[type=radio]': 'displayChoiceChanged'
          },
  
          initialize: function () {
              _.bindAll(this, 'render', 'unrender', 'remove','conceptChanged','displayChoiceChanged'); 
              this.model.bind('remove', this.unrender);            
          },
          conceptChanged:function(evt) {
  
             var value = $(evt.currentTarget).val();
              this.model.set('concept',value)
  
          },
  
          displayChoiceChanged:function(evt) {
              var value = $(evt.currentTarget).val();
              this.model.set('displayChoice',value)
          },
  
          render: function () {
  
              //workaround to access @ this.model from the anonymous inner function
              //making it a closure for the free variable model
              var model = this.model
  
              //workaround because .html() is not working with &lt;tr&gt;
              $(this.el).each(function(){                    
  
                jQuery(this)[0].innerHTML = '&lt;tr&gt;&lt;td&gt;' + '&lt;div class="form-group"&gt;' + '&lt;div class="form-control-wrapper"&gt;&lt;input value="' + model.get('concept') + '" class="form-control concept"  type="text"&gt;&lt;span class="material-input"&gt;&lt;/span&gt;&lt;/div&gt;' + '&lt;/div&gt;' + '&lt;/td&gt;' + '&lt;td&gt;' + '&lt;div class="radio radio-primary"&gt;' + '&lt;label&gt;' + '&lt;input type="radio" value="mandatory"&gt;' + '&lt;span class="circle"&gt;&lt;/span&gt;&lt;span class="check"&gt;&lt;/span&gt;' + '&lt;/label&gt;' + '&lt;/div&gt;' + '&lt;/td&gt;' + '&lt;td&gt;' + '&lt;div class="radio radio-primary"&gt;' + '&lt;label&gt;' + '&lt;input type="radio" value="random" checked="checked"&gt;' + '&lt;span class="circle"&gt;&lt;/span&gt;&lt;span class="check"&gt;&lt;/span&gt;' + '&lt;/label&gt;' + '&lt;/div&gt;' + '&lt;/td&gt;' + '&lt;td&gt;' + '&lt;div class="radio radio-primary"&gt;' + '&lt;label&gt;' + '&lt;input type="radio" value="disabled" &gt;' + '&lt;span class="circle"&gt;&lt;/span&gt;&lt;span class="check"&gt;&lt;/span&gt;' + '&lt;/label&gt;' + '&lt;/div&gt;' + '&lt;/td&gt;' + '&lt;td&gt;' + '&lt;button class="btn btn-primary delete" type="button"&gt;Remove&lt;/button&gt;' + '&lt;/td&gt;&lt;/tr&gt;';
      });
              return this; 
          },
  
          unrender: function () {
              $(this.el).remove();
          },
  
          remove: function () {
              this.model.destroy();
          }
      });
  
      /*Main view (List) */
      var ListView = Backbone.View.extend({
  
          el: $('div#left'), 
  
          initialize: function () {
              _.bindAll(this, 'render', 'addItem', 'appendItem'); 
  
              this.collection = new List();
              this.collection.bind('add', this.appendItem);
  
  
              /* Remove this block below, just for showcase purpose */
              var testModel = getTestModel();
              for (var i=0;i&lt;testModel.length;i++) {                
                  var item = new Item();
                  item.set(testModel[i]);
                  this.collection.add(item);
              }
              /* End of test showcase block */
  
  
              this.render(); //self-rendering view
          },
  
          events: {
              'click button#add': 'addItem',
              'click button#random': 'displayRandom'
          },
  
          appendItem: function (item) {
              var itemView = new ItemView({
                  model: item
              });
              $('tbody', this.el).append(itemView.render().el);
          },
  
          render: function () {
  
              var self = this;
  
              $(this.el).append("&lt;button id='add'&gt;Add item&lt;/button&gt;");
  
              $(this.el).append("&amp;nbsp;&lt;button id='random'&gt;Generate random graph&lt;/button&gt;");
  
              $(this.el).append("&lt;table class=\"table table-striped table-hover \"&gt;" 
                                  + "&lt;thead&gt;"
                                  + "&lt;tr&gt;" 
                                  + "&lt;th&gt;Concept&lt;/th&gt;" 
                                  + "&lt;th&gt;Mandatory&lt;/th&gt;" 
                                  + "&lt;th&gt;Random&lt;/th&gt;"
                                  + "&lt;th&gt;Disabled&lt;/th&gt;" 
                                  + "&lt;th&gt;Remove&lt;/th&gt;"
                                  + "&lt;/tr&gt;"
                                  + "&lt;/thead&gt;"
                                  +"&lt;tbody&gt;&lt;/tbody&gt;"
                                  +"&lt;/table&gt;");
  
              this.collection.each(function (item) { 
                  self.appendItem(item);
              }, this);
          }
  
  
          ,
          addItem: function () {
  
              var item = new Item();
              item.set({
                  concept: prompt("Write concept:"),
                  displayChoice : "random",
              });
              this.collection.add(item);
          },
  
  
  
  
          displayRandom: function() {
  
              displayRandomGraph(this.collection.models);
          }
  
  
      });
  
      /* end of Views */
  
      //Instantiate main app view.
      var listView = new ListView();
  })(jQuery);
  
  /* End of Backbone.js app */
  
  /* Start of Graph generation code */
  
  var  g2 = {
    "nodes": [],
    "edges": []
  };
  
  var s2 =  new sigma(  {
        renderers: [ {
              container: document.getElementById('innerRightCanvas'),
              type:'canvas'   
          } ],
          settings: {
              sideMargin:80,
              labelThreshold:1,
              mouseEnabled:false,
              enableHovering: false,
              autoRescale: false,
              autoResize:false,
              rescaleIgnoreSize: false
  
          }, graph: g2
  
      });
  //console.log(s2);
  
  /**
  Grap
  */
  function displayRandomGraph(concepts) {
  
      //disable multiple clicks
      //$("#random").prop('disabled', true);
      //setTimeout(function() {  $("#random").prop('disabled', false); }, 500);
  
      s2.graph.clear();
  
      //nodes
      for (var i=0; i &lt; concepts.length; i++) {                
  
          //Compute display choice
          if (concepts[i].get("displayChoice") == "disabled" || ( concepts[i].get("displayChoice") == "random" &amp;&amp; Math.random() &lt; 0.5) )
              continue;
  
  
          var id = "n" + s2.graph.nodes().length;
          var concept = { 
              "id" : id,
              "label" : concepts[i].get('concept'),
              "x" : Math.round(200 * (0.5 - Math.random())), 
              "y" : Math.round(200 * (0.5 - Math.random())), 
              'size': Math.round(Math.random() * 6) + 2,
              'color': 'rgb('+Math.round(Math.random()*256)+','+  Math.round(Math.random()*256)+','+ Math.round(Math.random()*256)+')'
              }
  
              s2.graph.addNode(concept)
      }
  
      //edges    
      for (var i=0; i &lt; s2.graph.nodes().length; i++) {
  
          var edgesForCurrentNode = Math.round(Math.pow(Math.random(),2) * 3);
  
          for (var j=0; j&lt;edgesForCurrentNode;j++) {
  
              var start = s2.graph.nodes()[i].id
              var end = start;
  
              //edges allowed only between different nodes
              while (end == start) {            
                  end = "n" + Math.round(Math.random()*(s2.graph.nodes().length -1));
              }
  
              var edge = {
                "id": "e" + s2.graph.edges().length,
                "source": start,
                "target": end
              };
  
  
              s2.graph.addEdge(edge)
          }
  
      }
  
      //console.log("NODES");console.log(s2.graph.nodes());
      //console.log("EDGES");console.log(s2.graph.edges());
      s2.refresh()
  
  }
  
  /* End of Graph generation code */
  
  
  /**
  test showcase
  */
  function getTestModel() {
  
     var testCollection = [];
     for (var i=0;i&lt;5;i++) {
          var item = {
              concept: "Concept " + i,
              displayChoice: "random",
          };
          testCollection.push(item);
      }
      return testCollection;
  }
  </code></pre>