シナリオのようなフローチャートで Vis.js を使用しようとしています。
データベースからフローチャートの情報を取得しており、Vis.js を使用してフローチャート ノードを適切にレイアウトしたいと考えています。
ただし、START ノードと END ノードは常にコンテナーの左端の中央と右端の中央に配置したいと考えています。
そうするためのオプションを理解できないようです。
これまでの私のコードはこのペンにあります:
var container = document.getElementById('visualization');
var nodes = [];
var edges = [];
nodes.push({
id: 1,
label: "START",
shape: "box",
fixed: {
x: true,
y: true,
},
x: 100,
y: 100,
});
nodes.push({
id: 2,
label: "test node 2"
});
nodes.push({
id: 3,
label: "test node 3"
});
nodes.push({
id: 4,
label: "test node 4\n Second line"
});
nodes.push({
id: 99,
label: "END",
fixed: true,
shape: "box",
});
edges.push({
from: 1,
to: 2,
label: 'text'
});
edges.push({
from: 1,
to: 3
});
edges.push({
from: 3,
to: 99
});
edges.push({
from: 2,
to: 4
});
edges.push({
from: 4,
to: 99
});
edges.push({
from: 3,
to: 4
});
var data = {
nodes: nodes,
edges: edges
};
var options = {
physics: {
enabled: true,
stabilization: true,
barnesHut: {
avoidOverlap: 1
},
},
edges: {
arrows: {
to: {
enabled: true,
scaleFactor: 1
},
middle: {
enabled: false,
scaleFactor: 1
},
from: {
enabled: false,
scaleFactor: 1
}
},
}
};
var timeline = new vis.Network(container, data, options);
http://codepen.io/anon/pen/WwdGvP
コンテナに対して START ノードと END ノードの位置を固定し、残りのレイアウトは VIS JS に任せるにはどうすればよいですか?