ネットワーク表示ライブラリ Vis.jsで遊んでみた
javascriptでネットワークグラフを書いてくれるライブラリを色々と試している。ノードなどの書き方が楽そうなvis.jsを試してみた。ネットワークグラフのサンプルがいくつか提供されている。その一つをcodepenでちょっといじったが、かなり面白い。ノード(丸いやつ)はマウスでドラッグ可能。びよんびよんと面白く動く。javascriptだけでこんなに簡単に速く動くなんて驚き。昔actionscriptでこんなのをゼロから作ろうと挫折したことがあるので、ライブラリという叡智の結晶のありがたさを痛感。
See the Pen
Vis Network | ためしに作ってみた by SANO Akira (@onakaponpon)
on CodePen.
ライブラリを使うには、SettingのJSで、このライブラリへの読み込み設定をしておくだけ。簡単。
javascriptで、配列にノードとエッジを設定する。その時に数値を設定すると、その大きさによってグラフにも影響を受ける。ノード記述はこんな感じ。エッジも同じ感じ。すごくシンプル。
nodes = [
{ id: 1, value: 10, label: "波平" },
{ id: 2, value: 5, label: "舟" },
(以下省略)
ネットワークグラフ以外にも色々なグラフが描けるみたいだ。すごく楽しい。時間が溶ける。
あ、マスオさんを書き忘れていた……。ごめんなさい。今度あったら謝っておこう。