0

シナリオのようなフローチャートで 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 に任せるにはどうすればよいですか?

4

1 に答える 1