JavaScript cytoscape不能正常工作，直到調整窗口大小窗口

Question

我是JavaScript的新手，特別是cytoscape。

我有代碼：

  <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> 

有人能解釋我爲什麼Cytoscape的的分度，JS只能後我調整Firefox窗口？調整大小後，所有工作正常。

我不知道它是否相關，但這個div是在引導程序導航標籤。

Answer 1

你需要用你的Cytoscape初始化的DOMContentLoaded事件監聽

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

Answer 2

嘗試ASIGN一個集裝箱之前cytospace完全的頁面。 例如：

<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>