javascriptgojs

Get trees closer together


I am using tree layout and I have multiple trees (multiple roots). How can I get the trees to be packed together and fill the empty space using layout.

Here is an example of my trees: unpacked trees image

I want them to be more like this: packed trees image

here is my current layout:

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,
        })
    });

Solution

  • @HumanTarget has the right idea. Here's an example:

      <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>
    

    Result: enter image description here

    But note that PackedLayout will treat each subtree as occupying a rectangular area, so it won't try to fit subtrees together where one or both of the subtrees has some empty space.