javascript - 节点的 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/