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

0

你需要添加

fixed: {
  x: true,
  y: true
}

到您的节点。

于 2016-04-11T12:23:00.750 回答