2

我有 2 个 Bootstrap 列（每个宽度是 12 个中的 6 个），左边的一个有一些按钮，右边的一个包含一个用 5 个节点初始化的 Cytoscape 图。

最初，当页面加载完成时，Cytoscape 图被设置为隐藏。

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

我的意图是，当单击“显示”按钮时，应该出现 Cytoscape 图。

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

但是，只有覆盖 Cytoscape 图形的面板出现，图形本身不出现。当我调整浏览器大小时，会出现带有 5 个节点的 Cytograph。

我怀疑与 cy.resize() 有什么关系，但我不知道如何以及在哪里做。

我非常感谢您的解决方案

完整代码在这里：

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

1 回答 1

4

演出后你必须打电话.resize()。Cytoscape 可以根据几种样式/回流更改自动调整自身大小，但它不能全部检测到。在 Cytoscape 自动修复之后，一些外部库（比如你的选项卡）可能会覆盖调整大小。

如果您的标签有问题，您可能希望调整大小。

于 2016-11-09T21:22:50.730 回答