Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

95
Views
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,
        })
    });
about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

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

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!