节点的GoJS位置

Question

就像我可以做的那样，使GoJS中的所有元素在一个组中相互在线，而不是像它们当前显示的那样成对，所以我想：

S -> A -> B -> E

但实际上是这样的：

S -> A

B -> E

在这里，我在jsFiddle，中给出了一个例子，非常感谢您的帮助。

    // Groups consist of a title in the color given by the group node data
    // above a translucent gray rectangle surrounding the member parts
    myDiagram.groupTemplate =
      $(go.Group, "Horizontal",
        { selectionObjectName: "PANEL",  // selection handle goes around shape, not label
          ungroupable: true },  // enable Ctrl-Shift-G to ungroup a selected Group
        $(go.TextBlock,
          {
            font: "13px sans-serif",
            isMultiline: false,  // don't allow newlines in text
            editable: true  // allow in-place editing by user
          },
          new go.Binding("text", "text").makeTwoWay(),
          new go.Binding("stroke", "color")),
        $(go.Panel, "Auto",
          { name: "PANEL" },
          $(go.Shape, "Process",  // the rectangular shape around the members
            { fill: "#FFF", stroke: "#333", strokeWidth: 1, width: 400 }),
          $(go.Placeholder, { padding: 10 })  // represents where the members are
        ),
        { // this tooltip Adornment is shared by all groups
          toolTip:
            $(go.Adornment, "Auto",
              $(go.Shape, { fill: "#FFFFCC" }),
              $(go.TextBlock, { margin: 4 },
                // bind to tooltip, not to Group.data, to allow access to Group properties
                new go.Binding("text", "", groupInfo).ofObject())
            )
        }
      );

Answer 1

在组内使用GridLayout：

myDiagram.groupTemplate =
  $(go.Group, "Horizontal",
    { selectionObjectName: "PANEL",  // selection handle goes around shape, not label
      ungroupable: true,
      layout: $(go.GridLayout)
    },

此外，要使布局中的节点居中，可以将locationSpot设置为中心：

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    { locationSpot: go.Spot.Center },

注意，S和E节点很高，因为它们的定义很高，所以看起来它们偏离了中心，但它们不是(选择它们来看看我的意思)。

http://jsfiddle.net/rb7nyxfd/6/