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

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'を指定しないと自動で位置を決定されてしまうので設定すること