修复节点相对于画布边界的位置

时间:2016-04-07 11:38:41

标签: vis.js vis.js-network

我正在尝试在类似方案的流程图中使用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处理其余的布局?

0 个答案:

没有答案