JavaScript Cytoscape funktioniert nicht, bis die Größe ändern Fenster

Question

Ich bin ein Neuling von JavaScript insbesondere von Cytoscape.

Ich habe diesen Code:

  <div id="graphicalEditor" class="tab-pane fade"> 

      <br> Name: <input type="text" id="name"> <input 
       type="button" onclick="addnode('name');" value="add node"> 
      <input type="button" onclick="cy.remove('node');" value="clear"> 
      <input type="button" onclick="sendData()" value="send"> <br> 
      <br> 

      <div id="cy" 
       style="width: 60em; height: 30em; postion: absolute; border: 1px solid black;"></div> 

      <script type="text/javascript"> 
       var cy = cytoscape({ 

        container : document.getElementById('cy'), 

        layout : { 
         name : 'preset' 
        }, 

        // so we can see the ids 
        style : [ { 
         selector : 'node', 
         style : { 
          'content' : 'data(id)' 
         } 
        } ] 

       }); 
      </script> 

      <script type="text/javascript"> 
       function addnode(p) { 

        var nome = document.getElementById(p).value; 

        var eles = cy.add([ { 
         group : "nodes", 
         data : { 
          id : nome 
         }, 
         position : { 
          x : 100, 
          y : 100 
         } 
        } 

        ]); 
       } 
      </script> 

      <script type="text/javascript"> 
       function sendData() { 
        $.ajax({ 
         type : 'GET', 
         dataType : 'json', 
         contentType : 'application/json', 
         url : "/testAjax", 
         data : cy.json() 

        }); 
       } 
      </script> 
     </div> 

Kann mir jemand erklären, warum die div von Cytoscape mit js funktioniert nur, nachdem ich im Firefox-Fenster Größe ändern? Nach der Größenänderung funktioniert alles gut.

Ich weiß nicht, ob es relevant ist, aber das div ist in Bootstrap Nav-Tabs.

Answer 1

Sie benötigen eine Initialisierung Cytoscape in einer vollständig die Seite vor Belastung cytospace DOMContentLoaded eventlistener

document.addEventListener("DOMContentLoaded", function() { 
    cy = cytoscape({..}) 
} 

Answer 2

Versuchen Sie wickeln einen Behälter asign. Zum Beispiel:

<script type="text/javascript"> 
    var cy; 
    $(document).ready(function(){ 
    cy = cytoscape({ 
     container : document.getElementById('cy'), 
      layout : { 
       name : 'preset' 
      }, 
       // so we can see the ids 
      style : [ { 
       selector : 'node', 
       style : { 
       'content' : 'data(id)' 
       } 
      } ] 
    }); 
    }); 
</script>