More than 5 years have passed since last update.

Cytoscapeの場所を指定した描画方法

Posted at 2019-01-11

Cytoscapeでネットワーク図を描こうと思った時に少しはまった個所をメモ
Cytoscapeの基本的な部分は後日まとめる予定ですが気になる方は下記のドキュメント参照してください

ポイント

  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

描画設定を行っているjavascript
elements属性の定義で各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'
        }
    })
}

cytoscape.css

#cy {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}

まとめ

layoutで'preset'を指定しないと自動で位置を決定されてしまうので設定すること

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up