让树木靠得更近

Question

我正在使用树布局并且我有多个树（多个根）。我如何才能将树打包在一起并使用布局填充空 space。

这是我的树的一个例子： unpacked trees image

我希望他们更像这样： packed trees image

这是我当前的布局：

let myDiagram = new go.Diagram("myDiagramDiv",
    {
        layout: new go.TreeLayout({
            treeStyle: go.TreeLayout.StyleLastParents,
            arrangement: go.TreeLayout.ArrangementHorizontal,
            compaction: go.TreeLayout.CompactionBlock,
            // properties for most of the tree:
            angle: 90,
            layerSpacing: 35,
            // properties for the "last parents":
            alternateAngle: 90,
            alternateLayerSpacing: 35,
            alternateAlignment: go.TreeLayout.AlignmentBus,
            alternateNodeSpacing: 20,
        })
    });

Answer 1

@HumanTarget 的想法是正确的。这是一个例子：

  <script type="module">
import * as go from "../release/go-module.js";
import { ArrangingLayout } from "../extensionsJSM/ArrangingLayout.js";
import { PackedLayout } from "../extensionsJSM/PackedLayout.js";

const $ = go.GraphObject.make;

const myDiagram =
  $(go.Diagram, "myDiagramDiv",
    {
      layout: $(ArrangingLayout,
        {
          primaryLayout: $(go.TreeLayout, { angle: 90 }),
          arrangingLayout: $(PackedLayout, { spacing: 10 }),
        })
    });

myDiagram.nodeTemplate =
  $(go.Node, "Auto",
    $(go.Shape, { fill: "white" },
      new go.Binding("fill", "color")),
    $(go.TextBlock, { margin: 8 },
      new go.Binding("text"))
  );

myDiagram.model = new go.GraphLinksModel(
  [
    { key: 1, text: "Alpha", color: "lightblue" },
    { key: 2, text: "Beta", color: "orange" },
    { key: 3, text: "Gamma", color: "lightgreen" },
    { key: 4, text: "Delta", color: "pink" },
    { key: 5, text: "Epsilon", color: "lightblue" },
    { key: 6, text: "Zeta", color: "orange" },
    { key: 7, text: "Eta", color: "lightgreen" },
    { key: 8, text: "Theta", color: "pink" },
    { key: 9, text: "Iota", color: "lightblue" },
    { key: 10, text: "Kappa", color: "orange" },
    { key: 11, text: "Lambda", color: "lightgreen" },
    { key: 12, text: "Mu", color: "pink" },
    { key: 13, text: "Nu", color: "lightblue" },
    { key: 14, text: "Xi", color: "orange" },
    { key: 15, text: "Omicron", color: "lightgreen" },
    { key: 16, text: "Pi", color: "pink" },
  ],
  [
    { from: 1, to: 2 },
    { from: 1, to: 3 },
    { from: 4, to: 5 },
    { from: 4, to: 6 },
    { from: 6, to: 7 },
    { from: 8, to: 9 },
    { from: 9, to: 10 },
    { from: 11, to: 12 },
    { from: 13, to: 14 },
    { from: 13, to: 15 },
    { from: 13, to: 16 },
  ]);
  </script>

结果：

但请注意 PackedLayout 会将每个子树视为占据一个矩形区域，因此它不会尝试将子树放在一起，其中一个或两个子树有一些空 space.

让树木靠得更近

Get trees closer together

javascript

gojs