vis.jsで共起ネットワークの作り方

vis.js公式サイト：https://visjs.org/
公式ドキュメント：https://visjs.github.io/vis-network/docs/network/

## vis.jsのネットワークでできること
- 各ノードのサイズを変更
- 各エッジのサイズを変更
- ノードに画像を貼り付ける
- ノードの形状変更（〇や△、☆など）
- 物理演算
- ノードに対してマウスオーバー時にテキストを表示

公式サイトのサンプル
[Vis Network Example](https://visjs.github.io/vis-network/examples/)

## 簡単なネットワークの例
```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);
}
```
### 実行結果
![network.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/197942/a151fa6f-a7ea-a0e4-28b7-ca8bf2581fb3.png)


### bodyを読み込んでからvis APIを実行させる
公式のサンプルプログラムがこの記述が多かった。
bodyの最後にscriptを記述するのもあり。


```index.html
<body onload="draw()">
```
```network.js
function draw() {
    // code...
}
```

## 構成
```js
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つある。

### 静的な場合
```js
nodes = [
    {id: 1, label: 'Node 1'},
    {id: 2, label: 'Node 2'},
    ....
];
edge = [
    {from: 1, to: 3},
    {from: 1, to: 2},
    ....
];
```

### 動的にデータを変化させる場合
```js
// ノードの配列
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},
    ....
]);
```




### ノードの設定
ノードの名前やサイズなどを個別に設定できる。

```js
{
    id: 1,                    // ノードを識別するID。数値と文字列が使える
    label: "tsukino_mito",    // ノードの名前
    size: 20,                 // ノードのサイズ
    title: "Hello!",          // カーソルを合わせた時に表示されるテキスト
    font {
      strokeWidth: 3,         // フォントの背景の線の大きさ（背景の大きさ）
      strokeColor: "white"    // フォントの背景色
    }
    // 下の設定を使うにはオプションのshapeをcircularImageに設定する
    image: "example.png"         // ノードに画像を設定
    brokenImage: "example2.png"  // imageの画像にエラーが起こった場合に備えて表示する画像
}
```
### 記述例
```js

var nodes = [
    { id: 1, label: "tsukino_mito", font: { strokeWidth: 3, strokeColor: "white" } },
    ....
]
```
詳細は以下を参照。
公式ドキュメント：[vis.js - Nodes documentation.](https://visjs.github.io/vis-network/docs/network/nodes.html#)

### エッジの設定
```js
{
    from: 1,                  // ID1のノードから
    to: 2,                    // ID2のノードに エッジを引く
    label: "edge"             // エッジの名前
    font {
        strokeWidth: 3        // フォントの背景の線の大きさ（背景の大きさ）
        strokeColor: "white"  // フォントの背景色
    }
}
```

### 記述例
```js

var edges = [
    { from: 1, to: 2, label: "edge", font: { strokeWidth: 3, strokeColor: "white" } }
    ....
]
```
詳細は以下を参照。
公式ドキュメント：[vis.js - Edges documentation.](https://visjs.github.io/vis-network/docs/network/edges.html#)


## オプション
### 全体に適応するノードの設定
上記で各ノードに設定をしましたが、オプションではすべてのノードに対して設定できます。

```js

// ノードについてのオプション
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](https://visjs.github.io/vis-network/docs/network/nodes.html)

### 全体に適応するエッジの設定
```js

// エッジについてのオプション
edges: {
    color: "#eeeeee" // エッジの色
}
```

### 物理演算
簡単で使えそうな物理演算のみ。
物理演算のシミュレーションができるページがあるので参考に。
[Playing with Physics](https://visjs.github.io/vis-network/examples/network/physics/physicsConfiguration.html)
もっと詳細に設定したい場合は以下から。
[Physics documentation](https://visjs.github.io/vis-network/docs/network/physics.html)


```js
physics: {
    enabled: true, // 物理演算のオンオフ
    barnesHut: {
        theta: 0.5,
        gravitationalConstant: -2000, // 中心の重力 0が重力の最大
        centralGravity: 0.3,          // 中心に集まる重力 
        springLength: 95,             // エッジの長さ
        springConstant: 0.04,         // エッジの弾性力
        damping: 0.09                 // ノードの減衰（間隔としては摩擦）
    }
}
```

### オプションの記述例
```js
var options = {
    autoResize: true,   // ウィンドウサイズをレスポンシブにする
    width: "100%",      // ウィンドウ横幅
    height: "100%",     // ウィンドウ縦幅
    nodes: {
        borderWidth: 4,
        size: 30,
        color: {
            border: "#222222",
            background: "#666666"
        },
        font: { color: "#eeeeee" }
    },
    edges: {
        color: "lightgray",
    }
}
```