Jquery 稍后无法显示隐藏的Cytoscape图形
我有两个引导列(每个宽度是12个中的6个),左边的一个有一些按钮,右边的一个包含一个初始化为5个节点的Cytoscape图 最初,当页面加载完成时,Cytoscape图形被设置为隐藏Jquery 稍后无法显示隐藏的Cytoscape图形,jquery,html,twitter-bootstrap,cytoscape.js,cytoscape,Jquery,Html,Twitter Bootstrap,Cytoscape.js,Cytoscape,我有两个引导列(每个宽度是12个中的6个),左边的一个有一些按钮,右边的一个包含一个初始化为5个节点的Cytoscape图 最初,当页面加载完成时,Cytoscape图形被设置为隐藏 $('.cyto_div').hide(); 我的意图是当点击“显示”按钮时,Cytoscape图形应该出现 $('.cyto_div').show(); 但是,仅显示覆盖Cytoscape图形的面板,图形本身不显示。当我调整浏览器的大小时,会出现带有5个节点的细胞图 我怀疑与cy.resize()有关,但
$('.cyto_div').hide();
我的意图是当点击“显示”按钮时,Cytoscape图形应该出现
$('.cyto_div').show();
但是,仅显示覆盖Cytoscape图形的面板,图形本身不显示。当我调整浏览器的大小时,会出现带有5个节点的细胞图
我怀疑与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>
带引导的细胞景观
#赛义德
{
边框:实心;
边界宽度:1;
高度:500px;
}
删除节点a
显示细胞图
图形区域
此区域用于图形
细胞凋亡终止
测试添加新节点
$(文档).ready(函数(){
var cy=细胞景观({
车轮灵敏度:0.05,
最小缩放:0.9,
maxZoom:20,
容器:document.getElementById('cy'),
元素:[{data:{id:'a'}},
{数据:{id:'b'}},
{data:{id:'c'}},
{data:{id:'d'}},
{数据:{id:'e'}},
{
数据:{
id:'ab',
资料来源:“a”,
目标:“b”
}
}],
风格:[
{
选择器:'节点',
样式:{
标签:'数据(id)'
}
}
]
});
$('.cyto_div').hide();
$('#test')。在('click',函数(e)上{
警报(“点击按钮”);
赛义德({
组:“节点”,
数据:{id:'x'},
位置:{x:190,y:190}
});
});
$('#show')。在('click',函数(e){
$('.cyto_div').show();
$('cy').show();
});
});
您必须在显示后调用.resize()
。Cytoscape可以根据几个样式/回流更改自动调整自身大小,但它无法检测到所有这些更改。在Cytoscape自动修复后,一些外部lib(比如您的选项卡)可能会覆盖调整大小
如果您的选项卡有问题,您可能需要将“调整大小”设置为去盎司