cytoscape.js에 노드를 추가하는 버튼을 만들어 빠졌습니다.
토폴로지를 그릴 수 있는 라이브러리.
자세한 내용은 다음 페이지를 확인하시기 바랍니다.
그런데, 이 녀석을 사용해, 노드를 추가하는 버튼을 만들어 보려고 생각했던 것이 어제.
즉시 라이브러리를 다운로드하고 자습서 소스를 복사. HTML의 머리에 버튼을 표시하도록 구현.
「AddNode」를 누르면 「c」가 추가된다.
"RemoveNode"를 누르면 "c"가 사라집니다.
폴더 구성
test.html
cytoscape-3.14.0 (폴더)
cytoscape.min.js
AdminLTE-3.0.2 (폴더)
css
img
js
플러그인
※ AdminLTE는 jQuery 호출하기 위해서만 사용하고 있으므로, jQuery 단독으로도 OK
궁극적으로 소스는 다음과 같습니다. 로컬에서도 움직일 것. (클릭하면 소스가 표시됩니다)
<!doctype html>
<html>
<head>
<title>Tutorial 1: Getting Started</title>
<!-- jQuery -->
<script src="AdminLTE-3.0.2/plugins/jquery/jquery.min.js"></script>
<script src="cytoscape-3.14.0\cytoscape.min.js"></script>
</head>
<style>
#cy {
width: 100%;
height: 95%;
position: absolute;
top: 5%;
left: 0px;
border: solid;
}
</style>
<body>
<button type="button" id="addNode">AddNode</button>
<button type="button" id="removeNode">RemoveNode</button>
<div id="cy"></div>
</body>
<script>
var cy = cytoscape({
container: document.getElementById('cy'), // container to render in
elements: [ // list of graph elements to start with
{ // node a
data: { id: 'a' }
},
{ // node b
data: { id: 'b' }
},
{ // edge ab
data: { id: 'ab', source: 'a', target: 'b' }
}
],
style: [ // the stylesheet for the graph
{
selector: 'node',
style: {
'background-color': '#666',
'label': 'data(id)'
}
},
{
selector: 'edge',
style: {
'width': 3,
'line-color': '#ccc',
'target-arrow-color': '#ccc',
'target-arrow-shape': 'triangle'
}
}
],
layout: {
name: 'grid',
rows: 1
}
});
$(function () {
$('#addNode').on('click', function () {
var eles = cy.add([
{ group: 'nodes', data: { id: 'c' }, position: { x: 100, y: 100 } },
{ group: 'edges', data: { id: 'e0', source: 'a', target: 'c' } } ]);
cy.reset();
});
});
$(function () {
$('#removeNode').on('click', function () {
var c = cy.$('#c');
cy.remove(c);
});
});
</script>
</html>
빠진 사촌
디버그로 조사해 보니, cytoscape의 canvas가 버튼 위에 써서 클릭할 수 없었다.
단순히 HTML(canvas)의 지식 부족이라고 생각하기 때문에 공부하면 바로 해결할 수 있는 수준이라고 생각한다.
이번에는 캔버스를 위에서 조금 밀어 버튼을 위한 공간을 확보했다.
노드가 보이지 않는 곳에 추가되어 있었기 때문에, 일순간 「AddNode」버튼을 눌러도 아무것도 일어나고 있지 않을까 생각했다.
canvas를 축소하면 나왔다. 그래서, 다시 그리기 위해서 여러가지 조사했다····
결국 reset에서 진정했다.
이것 재미. 사용법에 따라 여러가지 할 것 같다.
Reference
이 문제에 관하여(cytoscape.js에 노드를 추가하는 버튼을 만들어 빠졌습니다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/piyo8810/items/31ab0925f1de4eeabfa9텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
