vis.jsの使い方をメモしておきます。
#基本的なグラフ
公式のexampleのbasicグラフに幾つかのオプションを設定して描写してみます。
See the Pen vis.js example1 by NomuraS (@NomuraS) on CodePen.
コードの各部分を説明しておきます。
###htmlにグラフのidを配置する
<div id="mynetwork"></div>
###ノードとエッジの定義
// ノードの定義
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);
}