GoJS 从下到上设置布局，并在顶部放置节点

Question

我想在图表中有两个垂直布局的组，每个组都有一些可以拖放到另一个组中的节点，我想将节点放在组的顶部。

这就是我想要的：

beforedrop

afterdrop

我搜索了 gojs api 并尝试使用 go.LayeredDigraphLayout、gojs LayeredDigraphLayout，api 说将方向设置为 270 是向上的，但似乎不起作用..

我的节点仍然从上到下布局，当我放下节点时，它会移动到底部...

这是我得到的：

before

after

这是我的代码：

function init() {
    var $ = go.GraphObject.make;  // for conciseness in defining templates

    myDiagram = $(go.Diagram, "myDiagramDiv",
      {
        initialContentAlignment: go.Spot.Center,
        layout: $(go.GridLayout, { wrappingColumn: 2 }),
        "undoManager.isEnabled": true
      });

    myDiagram.groupTemplateMap.add("Group",
      $(go.Group, "Auto",
        {   resizable:  false,
            computesBoundsAfterDrag: true,
            layout: $(go.LayeredDigraphLayout,
                { columnSpacing: 5, direction: 180}),
            mouseDrop: function(e, grp) {
                    grp.addMembers(grp.diagram.selection, true);
            },
        },
        $(go.Shape, { fill: "white", stroke: "lightgray",width:200 }),
        $(go.Placeholder, { padding: 10 })
      ));

    myDiagram.nodeTemplate =
      $(go.Node, "Auto",
        {
            mouseDrop: function(e, grp) {
                grp.diagram.currentTool.doCancel();
            }
        },
        $(go.Shape, "RoundedRectangle",
          new go.Binding("fill", "color")),
        $(go.TextBlock, { margin: 3 },
          new go.Binding("text", "key"))
      );
    myDiagram.model = new go.GraphLinksModel(
    [
      { key: "G1", isGroup: true, category: "Group" },
      { key: "G2", isGroup: true, category: "Group" },
      { key: "Alpha", color: "lightblue", group: "G1" },
      { key: "Beta", color: "orange", group: "G1" },
      { key: "Gamma", color: "lightgreen", group: "G1" },
      { key: "Delta", color: "pink", group: "G1" },
      { key: "Alpha2", color: "lightblue", group: "G2" },
      { key: "Beta2", color: "orange", group: "G2" },
      { key: "Gamma2", color: "lightgreen", group: "G2" },
      { key: "Delta2", color: "pink", group: "G2" }
    ]);
}

<script src="https://gojs.net/latest/release/go.js"></script>
<body onload="init()">
<div id="myDiagramDiv" style="flex-grow: 1; height: 500px; border: solid 1px black"></div>
</body>

我把代码放在git上，只是一个html：GoJS_Layout_git

谁能帮我解决这个问题？非常感谢

Answer 1

您需要让每个 Group.layout 节点按照您想要的顺序排序。 LayeredDigraphLayout 不会帮助你，因为它应该重新排序层中的节点以减少 link 交叉。

而是使用 GridLayout 或 TreeLayout 并设置它们各自的 sorting 和 比较器 属性。后者必须是比较两个 Node（当 GridLayout 时）或两个 LayoutVertexes（当 TreeLayout 时）以进行排序的函数。文档中有这方面的示例，例如 https://gojs.net/latest/api/symbols/TreeLayout.html#comparer

GoJS 从下到上设置布局，并在顶部放置节点

GoJS set layout from bottom to top, and drop nodes on top

javascript

gojs