A hidden Cytoscape graph cannot be displayed later

I have 2 Bootstrap columns (each width is 6 out of 12), the one on the left has some buttons, the one on the right contains a Cytoscape graph initialized with 5 nodes.

Initially, when the page loading finished, the Cytoscape graph is set to be hidden.

$('.cyto_div').hide();

My intention is that when the "Show" button is clicked, the Cytoscape graph should appear.

$('.cyto_div').show();

However, only the panel covering the Cytoscape graph appears, the graph itself doesn't appear. When I resize the browser, then the Cytograph with 5 nodes appear.

I suspect somewthing to do with cy.resize(), but I don't know how and where to do it.

I appreciate your solution very much

The full code is here:

<!doctype html>
<html>
<head>
<title>Cytoscape with Bootstrap</title>
<script src="cytoscape.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<style type="text/css">
#cy 
{
      border: solid;
      border-width: 1;
      height: 500px;          
}   
</style>

</head>

<body>

<div class="col-lg-6">
    <button id="remove">Remove node a</button>
    <button id="show">Show the cytograph</button>
</div>

<div  class="col-lg-6 cyto_div"> 

    <div class="panel panel-primary">
        <div class="panel-heading">Graph Area</div>

        <div id="cy">
        <p> This area is for graph </p>             
        </div>

        <p> End of cyto </p>
        <button id = "test" class="btn     active" style="white-space:normal;"> Test adding a new node </button>
    </div>      

</div>

<script type="text/javascript">

$( document ).ready(function() {    

var cy = cytoscape({
    wheelSensitivity: 0.05,
    minZoom: 0.9,
    maxZoom: 20,
    container: document.getElementById('cy'),
    elements: [{ data: { id: 'a' } },
               { data: { id: 'b' } },
               { data: { id: 'c' } },
               { data: { id: 'd' } },
               { data: { id: 'e' } },
               {
                 data: {
                   id: 'ab',
                   source: 'a',
                   target: 'b'
               }
           }],
  style: [
          {
              selector: 'node',
              style: {                          
                  label: 'data(id)'                          
              }
          }
          ]
  });  

$('.cyto_div').hide();

$('#test').on('click', function(e) {

alert('Button clicked');
cy.add({
    group: "nodes",
    data: { id: 'x' },
    position: { x: 190 , y: 190  }
});
});

$('#show').on('click', function(e) {

$('.cyto_div').show();  
$('cy').show();
});  
});
</script>

</body>
</html>

You'll have to call .resize() after you show. Cytoscape can automatically resize itself on several style/reflow changes, but it can't detect them all. And some external libs (like your tabs) could potentially overwrite the resize after Cytoscape automatically fixes things up.

You may want to put the resize in a debounce if your tabs are problematic.

来源：https://stackoverflow.com/questions/40307570/a-hidden-cytoscape-graph-cannot-be-displayed-later

标签

jquery

html

twitter-bootstrap

cytoscape.js

cytoscape