Webサイト上でネットワークグラフを描画する方法

CSS, HTML, JavaScript, vis-network, vis.js, Web, グラフ, ネットワークグラフ, ライブラリ

描画できるもの

vis-networkというライブラリを使うと,例えばこんなネットワークグラフが描ける。

このグラフ,マウスによる操作もできる。

  • 線でつながれた楕円形をドラッグすると,その楕円形を好きな場所に移動できる。つながっている他のノードもバネでつながっているかのようにくっついて移動してくる。
  • 楕円形以外の場所をドラッグすると,グラフ全体を移動できる。
  • マウスホイールを回すと,グラフ全体の拡大/縮小ができる。

描画に必要なもの

2019年11月15日現在,vis-networkライブラリのCDNはかなり古いバージョンしか公開されていないため,自前で最新のライブラリを用意する方法がおすすめだ。

公式のGitHubではビルド済のパッケージが公開されていないため,自分でビルドしてライブラリを取得する必要がある。

ビルドするためには最低限,npmと呼ばれるパッケージ管理ソフトが必要だ。

以下では,ビルド環境の構築からライブラリの利用まで,ステップを追って説明する。

ビルド環境を構築する

次のものを,それぞれインストールする。手順は各サイトの説明に従おう。

vis-networkのソースコードを入手する

GitHubのvis-networkページからソースコードをダウンロードしよう。

Git環境がある人はリポジトリをクローンすればよい。

Git環境が無い人は緑色の「Clone or download」ボタンを押し,Download ZIPを押すことでダウンロードできる。(下図)

ライブラリを入手する

取得したソースコードのルートディレクトリ(「package.json」というファイルがあるフォルダ)を,Visual Studio Codeで開く。

Visual Studio Codeの画面の上にあるメニューから Terminal -> New Terminal を選択する。

画面下部でカーソルが点滅するので,キーボードで

npm i

と入力してEnterキーを押す。

何分間か処理が走るので,処理が終わるまで待つ。

処理が終わったら,画面の上のメニューから Terminal -> Run Task を選択し,表示されるタスク一覧から npm: build を選択する。

Continue without scanning the task output を選択する。

ソースコードのビルド処理が始まるので,処理が終わるまで待つ。

処理が無事に終わったら,standalone/umd フォルダに vis-network.min.js というファイルができているはずだ。

このファイルがネットワークグラフの描画に必要なものだ。

ネットワークグラフを描画する

HTML

ネットワークグラフを表示させたい場所に,id または class を指定しておく。

<div id="mynetwork"></div>

CSS

ネットワークグラフを表示させる領域のスタイルを定義する。

次の例では領域のサイズと,枠線の太さ・色などを指定している。

#mynetwork {
  width: 600px;
  height: 400px;
  border: 1px solid lightgray;
}

JavaScript

最後に,ネットワークグラフのデータの定義と,ライブラリの呼び出しを行うコードを記述する。

ライブラリを呼び出すためには次のデータが必要となる。

  • 各ノードを識別するための番号
  • 各ノードに表示する文字列
  • ノード間のつながりと方向
  • ライブラリ利用のオプション(詳しくはライブラリのRead meを参照すること)

これらをコードの中でどのように表現するのかについては以下のコード例を参考にして欲しい。

必ず以下のコードの前に,先ほど取得した vis-network.min.js を参照するためのコードをHTMLファイルに記述しておく。

// 各ノードを識別するための番号(id)と,各ノードに表示する文字列を定義する。
var nodes = new vis.DataSet([
  { id: 1, label: "Node 1" },
  { id: 2, label: "Node 2" },
  { id: 3, label: "Node 3" },
  { id: 4, label: "Node 4" },
  { id: 5, label: "Node 5" }
]);
 
// ノード間のつながりと方向を定義する。数字は各ノードのidを意味している。
var edges = new vis.DataSet([
  { from: 1, to: 3 },
  { from: 1, to: 2 },
  { from: 2, to: 4 },
  { from: 2, to: 5 },
  { from: 3, to: 3 }
]);
 
// ネットワークグラフを表示するHTML要素を取得する。
var container = document.getElementById("mynetwork");
 
// ライブラリに渡すためのデータを用意する。
var data = {
  nodes: nodes,
  edges: edges
};
var options = {};
 
// ライブラリを呼び出し,ネットワークグラフを描画する。
var network = new vis.Network(container, data, options);