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 不会帮助您，因为它应该重新排序图层中的节点以减少链接交叉。

相反，请使用 GridLayout 或 TreeLayout 并设置各自的排序和比较器属性。后者必须是一个函数，用于比较两个 Node （当GridLayout时）或两个 LayoutVertex es（当TreeLayout时）以进行排序。文档中有这样的示例，例如https://gojs.net/latest/api/symbols/TreeLayout.html#comparer

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

1 个答案: