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",
    }
}