JavaScriptのcytoscapeは、ウィンドウのサイズを変更するまで機能しません。

Question

私は、特にサイトスコープのJavaScriptの初心者です。

私はそのコードを持っている：cytoscapeのdiv要素は、JSで動作する理由

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

誰かが、私はFirefoxのウィンドウのサイズを変更した後にのみ、私を説明できますか？サイズ変更後はすべて正常に動作します。

このdivは関連性があるかどうかわかりませんが、このdivはブートストラップのnav-tabsにあります。あなたはDOMContentLoadedイベントリスナー

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

Answer 1

は完全にロードする前にページをcytospaceするための容器をasignしてください。例えば ：

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

Answer 2

であなたのcytoscapeの初期化をラップする必要が