2018年11月6日火曜日

Cytoscape.js を使ってグラフを描画してみた

概要
環境
index.html
custom.css
custom.js
動作確認
最後に
参考サイト

概要

Cytoscape.js は Cytoscape プロジェクトから派生した JavaScript 用のライブラリです
ノードとエッジを使ったグラフを描画することができます
今回は Getting Started 的な内容を紹介します

環境

macOS 10.14
Chrome 70.0.3538.77
Cytoscape.js 3.2.19

index.html

vim index.html

<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.2.19/cytoscape.js"></script>
    <link rel="stylesheet" type="text/css" href="custom.css">
  </head>
  <body>
    <div id="cy"></div>.
    <script src="custom.js"></script>
  </body>
</html>

まず Cytoscape.js の読み込みを行います
cdnjs があるのでそれを使わせてもらいます
jQuery 構文を使いたいので jQuery も読み込んでいます
あとはこの後作成するグラフ描画用の js ファイルとデザインを当て込む css を読み込んでいます

div タグでグラフを描画する領域を定義します
この領域を指定してグラフを描画するために id="cy" を指定しておきましょう
またポイントとしては div タブが描画されたあとに custom.js (グラフを描画するようのファイル) を読み込む必要があります
そうしないと Uncaught TypeError: Cannot read property 'indexOf' of undefined のエラーが発生してしまいます

custom.css

vim custom.css

#cy {
  width: 100%;
  height: 100%;
  display: block;
}

div タグの領域の広さを定義しておきます
とりあえず今回は画面いっぱいに出力します

custom.js

グラフを描画するメインの処理になります

vim custom.js

var cy = cytoscape({
  container: $('#cy'),
  elements: [
    {
      data: { id: 'a' }
    },
    {
      data: { id: 'b' }
    },
    {
      data: { id: 'ab', source: 'a', target: 'b' }
    }
  ],
  style: [
    {
      selector: 'node',
      style: {
        'background-color': '#666',
        'label': 'data(id)'
      }
    },
    {
      selector: 'edge',
      style: {
        'width': 3,
        'line-color': '#ccc',
        'target-arrow-color': '#ccc',
        'target-arrow-shape': 'triangle'
      }
    }
  ],
  layout: {
    name: 'grid',
    rows: 1
  }
});

まず container: $('#cy') でグラフを描画する領域を指定します
そして elements, style, layout を使ってノードとエッジの定義および描画を行います

まず elements ですがここで描画するノードとエッジを定義します

elements: [
  {
    data: { id: 'a' }
  },
  {
    data: { id: 'b' }
  },
  {
    data: { id: 'ab', source: 'a', target: 'b' }
  }
]

今回はノードが 2 つ、エッジを 1 つ定義します
source と target が指定されている場合はエッジになります

次に style です

style: [
  {
    selector: 'node',
    style: {
      'background-color': '#666',
      'label': 'data(id)'
    }
  },
  {
    selector: 'edge',
    style: {
      'width': 3,
      'line-color': '#ccc',
      'target-arrow-color': '#ccc',
      'target-arrow-shape': 'triangle'
    }
  }
]

elements で定義した node と edge に対するスタイルを定義します
背景色やラベル、線の太さなどを指定します

最後に layout です

layout: {
  name: 'grid',
  rows: 1
}

rows は初期ノードを表示する際の行数を指定できます
例えば 1 にした場合は行数は 1 行になるのでノードが横に並べられて表示されます
2 にすると 1 画面に 2 行 (ノード) 配置することが可能になるので今回のサンプルであれば縦に表示されます

縦にたくさんのノードを並べたいのであれば rows の値を大きくすると良いと思います

動作確認

open index.html

で以下のように表示されると思います

ノードは好きな箇所に移動できます
またエッジを掴むとグラフ全体を移動することができます

最後に

Cytoscape.js を使って簡単なノードとエッジのグラフを描画してみました
シンプルで良いかなと思います
デモもたくさん用意されています

基本はネットワークグラフを書くためのライブラリなのでチャートなどのグラフを書きたい場合は d3.js などを使うと良いと思います

参考サイト

http://js.cytoscape.org/#getting-started

hawksnowlog