Cytoscapeを使ったグラフ構造の描画方法

Cytoscapeとは

• CytoscapeはJavaScriptで使えるグラフ描画ライブラリ
• npmやyarnでインストール可能
• reactでcytoscapeを使えるライブラリもある

ターミナル

yarn add -D cytoscape
yarn add -D react-cytoscapejs

• 公式のreferenceはこちら

Cytoscapeの使い方

基本的な要素

• container：グラフを保持するDOM element
• elements：要素の配列，要素は以下の値を持った連想配列
  • data：ノードやリンクの上位概念であるグラフのプレーンオブジェクト
    • id：データのid
    • name：データの名前
    • label：データのラベル
    • parent：親ノードのid
    • source：リンクの根元にくるノードのid
    • target：リンクの先端にくるノードのid
  • classes：データの種類
• style：ノードやリンクのスタイルを指定する配列，cssみたいなもの
  • selector: スタイルを反映させる要素を指定
    • node，linkによる種類の指定や.anyによるクラスの指定，#anyによるidの指定が可能
  • style：スタイルの連想配列，styleという配列の中にある連想配列がsytleというkeyを持つ入れ子構造
    • label：要素のラベル
      • data(label)を指定するとlabelが描画されるようになる
    • content：要素の中身
      • 使い方はlabelと一緒っぽい
    • shape：要素の形
      • ノードだとrectangleやround-rectangleなどを指定可能
    • text-halign，text-valingn：ラベルやコンテンツの位置(水平方向，垂直方向)
• layout：レイアウトを指定する連想配列
  • name：レイアウトの名前
    • breadthfirstと書くと幅優先で描画される？

グラフを表す連想配列の例

{
    container: document.getElementById('cy'),
    elements: [
        {data: {id: '0'}},
        {data: {id: '1'}},
        {data: {
            id: '2',
            source: '0',
            target: '1'
        }}
    ],
    style: [
        {
            selector: 'node',
            style:{label: 'data(id)'}
        }
    ],
    layout: {name: 'random'}
}

実装方法

グラフの描画方法

• cytoscapeの引数に設定情報を書いた連想配列を渡すことでグラフを作成

sample.js

var cy = cytoccape({
    container: document.getElementById('cy'),
    elements: [
        {data: {id: '0'}},
        {data: {id: '1'}},
        {data: {
            id: '2',
            source: '0',
            target: '1'
        }}
    ]
})

グラフにノードを追加する

• cy.add()を使ってグラフにノードやリンクを追加可能