隐藏的Cytoscape图形稍后不能显示 [英] A hidden Cytoscape graph cannot be displayed later
问题描述
我有2个Bootstrap列（每个宽度是12个中的6个），左边的那个有一些按钮，右边的那个包含一个用5个节点初始化的Cytoscape图。
$
$（'b $ p p .cyto_div'）隐藏（）;
我的意图是当点击显示按钮时，应该出现Cytoscape图表。 p>
$（'。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 =stylesheethref =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>删除节点a< / button>
< button id =show>显示cytograph< / button>
< / div>
< div class =col-lg-6 cyto_div>
< div class =panel panel-primary>
< div class =panel-heading>图片区域< / div>
< div id =cy>
< p>该区域用于图表< / p>
< / div>
< p> cyto结束< / p>
< button id =testclass =btn activestyle =white-space：normal;>测试添加新节点< / 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'
}
风格：[
{
selector：'node'，
style：{
label：'data（id）'
$ b}）
$（'。cyto_div'）。hide（）;
$ （ '#TEST'）。在（'CL ick'，函数（e）{
alert（'Button clicked'）;
cy.add（{
group：nodes，
data：{id：'x'}，
position：{x：190，y：190}
}）;
}）; （''click'，function（e）{
'（'。cyto_div'）。show（）; $ b $（'＃show'）。 b $（'cy'）。show（）;
}）;
}）;
< / script>
< / body>
< / html>
您必须调用 .resize（）显示后。 Cytoscape可以自动调整自己的几种样式/重排变化，但它无法全部检测到它们。在Cytoscape自动修复事件后，一些外部库（如选项卡）可能会覆盖调整大小。
如果您的选项卡是有问题。
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.
这篇关于隐藏的Cytoscape图形稍后不能显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
