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()を使ってグラフにノードやリンクを追加可能