cytospaceというライブラリがある。
トポロジーを描画できるライブラリ。
詳しくは以下のページを確認するがよろし。
さて、こいつを使って、ノードを追加するボタンを作ってみようと思いたったのが昨日。
さっそくライブラリをダウンロードし、チュートリアルのソースをコピペ。HTMLの頭にボタンを表示するように実装。
「AddNode」を押すと「c」が追加される。
「RemoveNode」を押すと「c」が消える。
フォルダ構成
- test.html
- cytoscape-3.14.0(フォルダ)
- cytoscape.min.js
- AdminLTE-3.0.2(フォルダ)
- css
- img
- js
- plugins
最終的には、ソースは以下のようになった。ローカルでも動くはず。(クリックするとソースが表示されます)
<!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>
ハマったとこ
-
脳死で<body>にボタン実装したらクリックできなかった。
デバッグで調べてみたら、cytoscapeのcanvasがボタンの上にかぶっててクリックできなかった。
単純にHTML(canvas)の知識不足だと思うので、勉強すればすぐ解決できるレベルだと思う。
今回はcanvasを上からちょっとずらして、ボタンのためのスペースを確保した。 -
ノードを追加してもグラフが再描画(reload)されなかった
ノードが見えないところに追加されていたので、一瞬「AddNode」ボタンを押しても何も起きていないのかと思った。
canvasを縮小したら出てきた。なので、再描画させるためにいろいろ調べた････
最終的にresetで落ち着いた。
これ面白い。使い方次第でいろいろできそう。