Cytoscapeの場所を指定した描画方法
Cytoscapeの場所を指定した描画方法:
Cytoscapeでネットワーク図を描こうと思った時に少しはまった個所をメモ
Cytoscapeの基本的な部分は後日まとめる予定ですが気になる方は下記のドキュメント参照してください
http://js.cytoscape.org/
ポイント
描画設定を行っているjavascript
elements属性の定義で各nodeでpositionを設定する
左上がx:0,y:0地点
cytoscape.css
layoutで'preset'を指定しないと自動で位置を決定されてしまうので設定すること
Cytoscapeでネットワーク図を描こうと思った時に少しはまった個所をメモ
Cytoscapeの基本的な部分は後日まとめる予定ですが気になる方は下記のドキュメント参照してください
http://js.cytoscape.org/
ポイント
layout: {
name: 'preset'
},
コード
html
<!doctype html>
<html>
<head>
<title>Tutorial</title>
<meta charset="UTF-8">
<script src="lib/cytoscape.min.js"></script>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<link rel="stylesheet" href="css/cytoscape.css">
</head>
<body>
<div id="cy"></div>
<script src="js/glaph.js"></script>
</body>
</html>
glaph.js
描画設定を行っているjavascriptelements属性の定義で各nodeでpositionを設定する
左上がx:0,y:0地点
var sample_data = [
{ data: { id: 'A' }, position: { x: 100, y: 100 } },
{ data: { id: 'B' }, position: { x: 300, y: 100 } },
{ data: { id: 'C' }, position: { x: 100, y: 300 } },
{ data: { id: 'D' }, position: { x: 300, y: 300 } }
]
var style = [
{
selector: 'node',
style: {
shape: 'square',
'background-fit': 'cover cover',
'background-image-opacity': 0.5,
'background-color': '#bbb',
label: 'data(id)'
}
}
]
window.onload = function () {
var cy = cytoscape({
container: document.getElementById('cy'),
elements: sample_data,
style: style,
layout: {
name: 'preset'
}
})
}
#cy {
width: 100%;
height: 100%;
position: absolute;
top: 0px;
left: 0px;
}
コメント
コメントを投稿