20
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

vis.jsでグラフ描写

Posted at

vis.jsの使い方をメモしておきます。

#基本的なグラフ
公式のexampleのbasicグラフに幾つかのオプションを設定して描写してみます。

See the Pen vis.js example1 by NomuraS (@NomuraS) on CodePen.

コードの各部分を説明しておきます。

###htmlにグラフのidを配置する

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

###ノードとエッジの定義

javascript
  // ノードの定義
var nodes = new vis.DataSet([
      { id: 1, label: 'Node 1' },
      // ノードにfont: { multi: true }を追加することで<i></i>、<b></b>、<code></code>タグが使えて、また個々のフォントカラーが設定できる
      { id: 2, font: { multi: true }, label: '<b>Node 2</b>' },
      { id: 3, font: { multi: true }, label: '<code>Node 3</code>' },
      { id: 4, font: { multi: true }, label: '<i>Node 4</i>' },
      { id: 5, font: { multi: true }, label: '<i><b>Node 5</b></i>' }
]);

  // エッジの定義
  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}
  ]);

// グラフの定義(ノードとエッジ)
  var data = {
    nodes: nodes,
    edges: edges
  };

###オプション設定
基本的なオプションを幾つか設定しています。もっと詳細に設定できるので、公式ドキュメントを参照してください。

var options = {
      physics: false, // 物理シミュレーションをオフにする
      nodes: {
            shape: 'box', // ノードの形をellipseからboxに
            size: 20, // ノードの大きさ
            font: {
              boldital: { color: 'pink' }, // <i><b>aaa</b></i>タグのカラー
              ital: { color: 'orange' },  // <i>aaa</i>タグのカラー
              mono: { color: 'blue' }, // <code>aaa</code>タグのカラー
              bold: { color: 'purple' }, // <b>aaa</b>タグのカラー
              color: 'yellow', // タグなしのノードの文字の色
            },
            color: "skyblue" // ノードカラー
      },
      edges: {
            arrows: 'to', // エッジに矢印を付けて有向グラフにする
            smooth: false // falseにするとエッジが直線になる
      },
};

###グラフの描写
次のコードでhtmlの id="mynetwork"の場所にグラフが出現します。

  // create a network
  var container = document.getElementById('mynetwork');
  var network = new vis.Network(container, data, options);

#グラフの動的な操作
グラフの物理シミュレーションの操作パネルとノード・エッジの追加/削除のパネルを追加します。両方共公式で用意されているものを使います。

See the Pen vis.js example2 by NomuraS (@NomuraS) on CodePen.

##JSのoption
細かい記述はCodePenのサンプルを見てもらえば良いとして、vis.jsのオプションだけ再掲しておきます。オプションは次のようになっています。


            var options = {
                // ノード・エッジ追加/削除ポップアップパネル
                manipulation: {
                    addNode: function (data, callback) {
                        // filling in the popup DOM elements
                        document.getElementById('operation').innerHTML = "Add Node";
                        document.getElementById('node-id').value = data.id;
                        document.getElementById('node-label').value = data.label;
                        document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
                        document.getElementById('cancelButton').onclick = clearPopUp.bind();
                        document.getElementById('network-popUp').style.display = 'block';
                    },
                    editNode: function (data, callback) {
                        // filling in the popup DOM elements
                        document.getElementById('operation').innerHTML = "Edit Node";
                        document.getElementById('node-id').value = data.id;
                        document.getElementById('node-label').value = data.label;
                        document.getElementById('saveButton').onclick = saveData.bind(this, data, callback);
                        document.getElementById('cancelButton').onclick = cancelEdit.bind(this, callback);
                        document.getElementById('network-popUp').style.display = 'block';
                    },
                    addEdge: function (data, callback) {
                        if (data.from == data.to) {
                            var r = confirm("Do you want to connect the node to itself?");
                            if (r == true) {
                                callback(data);
                            }
                        } else {
                            callback(data);
                        }
                    }
                },
                // 物理変更パネル
                configure: {
                    filter: function (option, path) {
                        if (path.indexOf('physics') !== -1) {
                            return true;
                        }
                        if (path.indexOf('smooth') !== -1 || option === 'smooth') {
                            return true;
                        }
                        return false;
                    },
                    container: document.getElementById('config')
                }

            };

clearPopUp、cancelEdit、saveDataという関数は別に定義しておきます。

    function clearPopUp() {
            document.getElementById('saveButton').onclick = null;
            document.getElementById('cancelButton').onclick = null;
            document.getElementById('network-popUp').style.display = 'none';
        }

        function cancelEdit(callback) {
            clearPopUp();
            callback(null);
        }

        function saveData(data, callback) {
            data.id = document.getElementById('node-id').value;
            data.label = document.getElementById('node-label').value;
            clearPopUp();
            callback(data);
        }
20
18
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
20
18

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?