1
2 개의 부트 스트랩 열 (각 너비는 12 개 중 6 개입니다), 왼쪽에는 몇 개의 버튼이 있고 오른쪽에는 5 개의 노드로 초기화 된 Cytoscape 그래프가 있습니다.숨겨진 Cytoscape 그래프를 나중에 표시 할 수 없습니다.
처음에는 페이지로드가 완료되면 Cytoscape 그래프가 숨겨 지도록 설정됩니다.
$('.cyto_div').hide();
"표시"버튼을 클릭하면 Cytoscape 그래프가 나타납니다.
$('.cyto_div').show();
그러나 Cytoscape 그래프 커버 패널 만이 나타나는 그래프 자체는 나타나지 않는다. 브라우저 크기를 조정하면 5 개의 노드가있는 Cytograph가 나타납니다.
나는 cy.resize()와 관련이 있다고 생각하지만, 어떻게 그리고 어디에서해야하는지 모르겠습니다. 당신은 당신이 보여 후 .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>