Estoy usando un diseño de árbol y tengo varios árboles (múltiples raíces). ¿Cómo puedo juntar los árboles y llenar el espacio vacío usando el diseño?
Aquí hay un ejemplo de mis árboles: imagen de árboles descomprimidos
Quiero que sean más como esto: imagen de árboles empacados
aquí está mi diseño actual:
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, }) });@HumanTarget tiene la idea correcta. Aquí hay un ejemplo:
<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>Pero tenga en cuenta que PackedLayout tratará cada subárbol como si ocupara un área rectangular, por lo que no intentará unir los subárboles donde uno o ambos subárboles tienen algún espacio vacío.