vis.js公式サイト：https://visjs.org/
公式ドキュメント：https://visjs.github.io/vis-network/docs/network/
vis.jsのネットワークでできること
- 各ノードのサイズを変更
- 各エッジのサイズを変更
- ノードに画像を貼り付ける
- ノードの形状変更（〇や△、☆など）
- 物理演算
- ノードに対してマウスオーバー時にテキストを表示
公式サイトのサンプル
Vis Network Example
簡単なネットワークの例
index.html
<html>
<head>
<title>Simplest Network Example</title>
<script type="text/javascript" src="https://unpkg.com/vis-network/standalone/umd/vis-network.min.js"></script>
<script type="text/javascript" src="simplest_example.js"></script>
</head>
<body onload="draw()"><!-- bodyが読み込まれてから実行 -->
<div id="mynetwork"></div>
</body>
simplest_example.js
function draw() {
var nodes = [
{ id: 1, label: "Node 1" },
{ id: 2, label: "Node 2", size: 20 },
{ id: 3, label: "Node 3" },
{ id: 4, label: "Node 4" },
{ id: 5, label: "Node 5" },
];
var edges = [
{ from: 1, to: 3 },
{ from: 1, to: 2 },
{ from: 2, to: 4 },
{ from: 2, to: 5 }
];
var data = {
nodes: nodes,
edges: edges
}
var options = {
nodes: {
shape: "dot",
borderWidth: 3,
size: 10,
color: {
border: "#222222",
background: "#666666"
},
font: {
color: "#000"
}
}
}
var container = document.getElementById("mynetwork");
var network = new vis.Network(container, data, options);
}
実行結果
bodyを読み込んでからvis APIを実行させる
公式のサンプルプログラムがこの記述が多かった。
bodyの最後にscriptを記述するのもあり。
index.html
<body onload="draw()">
network.js
function draw() {
// code...
}
構成
var nodes = [
// ノードを作成する
];
var edge = [
// エッジを作成する
];
var data = {
nodes: nodes,
edges: edges
}
var options = {
// オプション
}
// ネットワーク作成
var container = document.getElementById("mynetwork");
var network = new vis.Network(container, data, options);
ノードとエッジの作成
ノードとエッジはオブジェクトで作成する。静的な描画と動的な描画で書き方は2つある。
静的な場合
nodes = [
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
....
];
edge = [
{from: 1, to: 3},
{from: 1, to: 2},
....
];
動的にデータを変化させる場合
// ノードの配列
var nodes = new vis.DataSet([
{id: 1, label: 'Node 1'},
{id: 2, label: 'Node 2'},
....
]);
// エッジの配列
var edges = new vis.DataSet([
{from: 1, to: 3},
{from: 1, to: 2},
....
]);
ノードの設定
ノードの名前やサイズなどを個別に設定できる。
{
id: 1, // ノードを識別するID。数値と文字列が使える
label: "tsukino_mito", // ノードの名前
size: 20, // ノードのサイズ
title: "Hello!", // カーソルを合わせた時に表示されるテキスト
font {
strokeWidth: 3, // フォントの背景の線の大きさ（背景の大きさ）
strokeColor: "white" // フォントの背景色
}
// 下の設定を使うにはオプションのshapeをcircularImageに設定する
image: "example.png" // ノードに画像を設定
brokenImage: "example2.png" // imageの画像にエラーが起こった場合に備えて表示する画像
}
記述例
var nodes = [
{ id: 1, label: "tsukino_mito", font: { strokeWidth: 3, strokeColor: "white" } },
....
]
詳細は以下を参照。
公式ドキュメント：vis.js - Nodes documentation.
エッジの設定
{
from: 1, // ID1のノードから
to: 2, // ID2のノードに エッジを引く
label: "edge" // エッジの名前
font {
strokeWidth: 3 // フォントの背景の線の大きさ（背景の大きさ）
strokeColor: "white" // フォントの背景色
}
}
記述例
var edges = [
{ from: 1, to: 2, label: "edge", font: { strokeWidth: 3, strokeColor: "white" } }
....
]
詳細は以下を参照。
公式ドキュメント：vis.js - Edges documentation.
オプション
全体に適応するノードの設定
上記で各ノードに設定をしましたが、オプションではすべてのノードに対して設定できます。
// ノードについてのオプション
nodes: {
shape: "dot", // ノードの形（※形については下に記述）
borderWidth: 5, // ノードのボーダーの太さ
size: 30, // 全体のノードの大きさ
color: { // - 配色設定 -
border: "#222222", // ボーターの色
background: "#666666" // ノードの色
}
font: {
color: "#eeeeee" // ノードのフォントの色
}
}
ノードの形 - shape
diamond - ◇ひし形
dot - ○円形
star - ☆星形
triangle - △三角形
triangleDown - ▽逆三角形
hexagon - 六角形
square - □正方形
circularImage - 円形画像（別途画像を用意する必要あります）
ここには簡単なものだけ載せた。詳細は以下
Nodes documentation
全体に適応するエッジの設定
// エッジについてのオプション
edges: {
color: "#eeeeee" // エッジの色
}
物理演算
簡単で使えそうな物理演算のみ。
物理演算のシミュレーションができるページがあるので参考に。
Playing with Physics
もっと詳細に設定したい場合は以下から。
Physics documentation
physics: {
enabled: true, // 物理演算のオンオフ
barnesHut: {
theta: 0.5,
gravitationalConstant: -2000, // 中心の重力 0が重力の最大
centralGravity: 0.3, // 中心に集まる重力
springLength: 95, // エッジの長さ
springConstant: 0.04, // エッジの弾性力
damping: 0.09 // ノードの減衰（間隔としては摩擦）
}
}
オプションの記述例
var options = {
autoResize: true, // ウィンドウサイズをレスポンシブにする
width: "100%", // ウィンドウ横幅
height: "100%", // ウィンドウ縦幅
nodes: {
borderWidth: 4,
size: 30,
color: {
border: "#222222",
background: "#666666"
},
font: { color: "#eeeeee" }
},
edges: {
color: "lightgray",
}
}