create-gojs-kit

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, viewport-fit=cover"/> <meta name="description" content="A collapsible tree layout with all of the leaf nodes at the same layer." /> <meta itemprop="description" content="A collapsible tree layout with all of the leaf nodes at the same layer." /> <meta property="og:description" content="A collapsible tree layout with all of the leaf nodes at the same layer." /> <meta name="twitter:description" content="A collapsible tree layout with all of the leaf nodes at the same layer." /> <link rel="preconnect" href="https://rsms.me/"> <link rel="stylesheet" href="../assets/css/style.css">  <meta itemprop="name" content="Parse Tree Diagram With Leaf Nodes in Horizontal Line" /> <meta property="og:title" content="Parse Tree Diagram With Leaf Nodes in Horizontal Line" /> <meta name="twitter:title" content="Parse Tree Diagram With Leaf Nodes in Horizontal Line" /> <meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/parsetree.png" /> <meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/parsetree.png" /> <meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/parsetree.png" /> <meta property="og:url" content="https://gojs.net/latest/samples/parseTree.html" /> <meta property="twitter:url" content="https://gojs.net/latest/samples/parseTree.html" /> <meta name="twitter:card" content="summary_large_image" /> <meta property="og:type" content="website" /> <meta property="twitter:domain" content="gojs.net" /> <title> Parse Tree Diagram With Leaf Nodes in Horizontal Line | GoJS Diagramming Library </title> </head> <body>  <nav id="navTop" class=" w-full h-[var(--topnav-h)] z-30 bg-white border-b border-b-gray-200"> <div class="max-w-screen-xl mx-auto flex flex-wrap items-start justify-between px-4"> <a class="text-white bg-nwoods-primary font-bold !leading-[calc(var(--topnav-h)_-_1px)] my-0 px-2 text-4xl lg:text-5xl logo" href="../"> GoJS </a> <div class="relative"> <button id="topnavButton" class="h-[calc(var(--topnav-h)_-_1px)] px-2 m-0 text-gray-900 bg-inherit shadow-none md:hidden hover:!bg-inherit hover:!text-nwoods-accent hover:!shadow-none" aria-label="Navigation"> <svg class="h-7 w-7 block" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"> <path d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke-linecap="round" stroke-linejoin="round"/> </svg> </button> <div id="topnavList" class="hidden md:block"> <div class="absolute right-0 z-30 flex flex-col items-end rounded border border-gray-200 p-4 pl-12 shadow bg-white text-gray-900 font-semibold md:flex-row md:space-x-4 md:items-start md:border-0 md:p-0 md:shadow-none md:bg-inherit"> <a href="../learn/">Learn</a> <a href="../samples/">Samples</a> <a href="../intro/">Intro</a> <a href="../api/">API</a> <a href="../download.html">Download</a> <a href="https://forum.nwoods.com/c/gojs/11" target="_blank" rel="noopener">Forum</a> <a id="tc" href="https://nwoods.com/contact.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/contact.html', 'contact');">Contact</a> <a id="tb" href="https://nwoods.com/sales/index.html" target="_blank" rel="noopener" onclick="getOutboundLink('https://nwoods.com/sales/index.html', 'buy');">Buy</a> </div> </div> </div> </div> </nav> <script> window.addEventListener("DOMContentLoaded", function () { // topnav var topButton = document.getElementById("topnavButton"); var topnavList = document.getElementById("topnavList"); if (topButton && topnavList) { topButton.addEventListener("click", function (e) { topnavList .classList .toggle("hidden"); e.stopPropagation(); }); document.addEventListener("click", function (e) { // if the clicked element isn't the list, close the list if (!topnavList.classList.contains("hidden") && !e.target.closest("#topnavList")) { topButton.click(); } }); // set active <a> element var url = window .location .href .toLowerCase(); var aTags = topnavList.getElementsByTagName('a'); for (var i = 0; i < aTags.length; i++) { var lowerhref = aTags[i] .href .toLowerCase(); if (lowerhref.endsWith('.html')) lowerhref = lowerhref.slice(0, -5); if (url.startsWith(lowerhref)) { aTags[i] .classList .add('active'); break; } } } }); </script> <div class="flex flex-col prose"> <div class="w-full max-w-screen-xl mx-auto">   <script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script> <div id="allSampleContent" class="p-4 w-full"> <script id="code"> // Customize the TreeLayout to position all of the leaf nodes at the same vertical Y position. class FlatTreeLayout extends go.TreeLayout { constructor(init) { super(); if (init) Object.assign(this, init); } // This assumes the TreeLayout.angle is 90 -- growing downward commitLayout() { super.commitLayout(); // call base method first // find maximum Y position of all Nodes var y = -Infinity; this.network.vertexes.each(v => y = Math.max(y, v.node.position.y)); // move down all leaf nodes to that Y position, but keeping their X position this.network.vertexes.each(v => { if (v.destinationEdges.count === 0) { // shift the node down to Y v.node.moveTo(v.node.position.x, y); // extend the last segment vertically v.node.toEndSegmentLength = Math.abs(v.centerY - y); } else { // restore to normal value v.node.toEndSegmentLength = 10; } }); } } // end FlatTreeLayout function init() { myDiagram = new go.Diagram('myDiagramDiv', { allowCopy: false, allowDelete: false, allowMove: false, initialAutoScale: go.AutoScale.Uniform, layout: new FlatTreeLayout({ // custom Layout, defined below angle: 90, compaction: go.TreeCompaction.None, arrangement: go.TreeArrangement.FixedRoots }), 'undoManager.isEnabled': true }); myDiagram.nodeTemplate = new go.Node('Vertical', { selectionObjectName: 'BODY' }) .add( new go.Panel('Auto', { name: 'BODY' }) .add( new go.Shape('RoundedRectangle') .bind('fill') .bind('stroke'), new go.TextBlock({ font: 'bold 12pt Arial, sans-serif', margin: new go.Margin(4, 2, 2, 2) }) .bind('text') ), new go.Panel({ height: 17 }) // always this height, even if the TreeExpanderButton is not visible .add( go.GraphObject.build('TreeExpanderButton') ) ); myDiagram.linkTemplate = new go.Link() .add( new go.Shape({ strokeWidth: 1.5 }) ); // set up the nodeDataArray, describing each part of the sentence var nodeDataArray = [ { key: 1, text: "Sentence", fill: "#f68c06", stroke: "#4d90fe" }, { key: 2, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 1 }, { key: 3, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 2 }, { key: 4, text: "A", fill: "#f8f8f8", stroke: "#4d90fe", parent: 3 }, { key: 5, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 2 }, { key: 6, text: "rare", fill: "#f8f8f8", stroke: "#4d90fe", parent: 5 }, { key: 7, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 2 }, { key: 8, text: "black", fill: "#f8f8f8", stroke: "#4d90fe", parent: 7 }, { key: 9, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 2 }, { key: 10, text: "squirrel", fill: "#f8f8f8", stroke: "#4d90fe", parent: 9 }, { key: 11, text: "VP", fill: "#f68c06", stroke: "#4d90fe", parent: 1 }, { key: 12, text: "VBZ", fill: "#ccc", stroke: "#4d90fe", parent: 11 }, { key: 13, text: "has", fill: "#f8f8f8", stroke: "#4d90fe", parent: 12 }, { key: 14, text: "VP", fill: "#f68c06", stroke: "#4d90fe", parent: 11 }, { key: 15, text: "VBN", fill: "#ccc", stroke: "#4d90fe", parent: 14 }, { key: 16, text: "become", fill: "#f8f8f8", stroke: "#4d90fe", parent: 15 }, { key: 17, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 14 }, { key: 18, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 17 }, { key: 19, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 18 }, { key: 20, text: "a", fill: "#f8f8f8", stroke: "#4d90fe", parent: 19 }, { key: 21, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 18 }, { key: 22, text: "regular", fill: "#f8f8f8", stroke: "#4d90fe", parent: 21 }, { key: 23, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 18 }, { key: 24, text: "visitor", fill: "#f8f8f8", stroke: "#4d90fe", parent: 23 }, { key: 25, text: "PP", fill: "#f68c06", stroke: "#4d90fe", parent: 17 }, { key: 26, text: "TO", fill: "#ccc", stroke: "#4d90fe", parent: 25 }, { key: 27, text: "to", fill: "#f8f8f8", stroke: "#4d90fe", parent: 26 }, { key: 28, text: "NP", fill: "#f68c06", stroke: "#4d90fe", parent: 25 }, { key: 29, text: "DT", fill: "#ccc", stroke: "#4d90fe", parent: 28 }, { key: 30, text: "a", fill: "#f8f8f8", stroke: "#4d90fe", parent: 29 }, { key: 31, text: "JJ", fill: "#ccc", stroke: "#4d90fe", parent: 28 }, { key: 32, text: "suburban", fill: "#f8f8f8", stroke: "#4d90fe", parent: 31 }, { key: 33, text: "NN", fill: "#ccc", stroke: "#4d90fe", parent: 28 }, { key: 34, text: "garden", fill: "#f8f8f8", stroke: "#4d90fe", parent: 33 }, { key: 35, text: ".", fill: "#ccc", stroke: "#4d90fe", parent: 1 }, { key: 36, text: ".", fill: "#f8f8f8", stroke: "#4d90fe", parent: 35 } ] // create the Model with data for the tree, and assign to the Diagram myDiagram.model = new go.TreeModel(nodeDataArray); } window.addEventListener('DOMContentLoaded', init); </script> <div id="sample"> <div id="myDiagramDiv" style="border: solid 1px black; width:100%; height:500px"></div> <p>A <em>parse tree</em> is an ordered, rooted tree representing the structure of a sentence, broken down to parts-of-speech.</p> <p> This diagram uses a custom <a>TreeLayout</a> called <b>FlatTreeLayout</b> that places all leaf nodes at the same Y position. It also makes use of a <b>TreeExpanderButton</b> on the node template. See the <a href="../intro/buttons.html">Intro page on Buttons</a> for more GoJS button information. </p> <p> The abbreviations used in this diagram are: <ul> <li><b>NP</b>, a noun phrase</li> <li><b>VP</b>, a verb phrase</li> <li><b>PP</b>, a prepositional phrase</li> <li><b>DT</b>, a determiner</li> <li><b>JJ</b>, an adjective</li> <li><b>NN</b>, a common noun</li> <li><b>VBZ</b>, a third person singular present verb</li> <li><b>VBN</b>, a past participle verb</li> </ul> </p> </div> </div>   </div> <div id="allTagDescriptions" class="p-4 w-full max-w-screen-xl mx-auto"> <hr/> <h3 class="text-xl">GoJS Features in this sample</h3>  <h4>Tree Layout</h4> <p> This predefined layout is used for placing Nodes of a tree-structured graph in layers (rows or columns). For discussion and examples of the most commonly used properties of the <a href="../api/symbols/TreeLayout.html">TreeLayout</a>, see the <a href="../intro/trees.html">Trees</a> page in the Introduction. More information can be found in the <a href="../intro/layouts.html#TreeLayout">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#treelayout">Related samples</a> </p> <hr>  <h4>Custom Layouts</h4> <p> GoJS allows for the creation of custom layouts to meet specific needs. </p> <p> There are also many layouts that are extensions -- not predefined in the <code>go.js</code> or <code>go-debug.js</code> library, but available as source code in one of the three extension directories, with some documentation and corresponding samples. More information can be found in the <a href="../intro/layouts.html#CustomLayouts">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#customlayout">Related samples</a> </p> <hr>  <h4>Buttons</h4> <p> GoJS defines several <a href="../api/symbols/Panel.html" target="api">Panel</a>s for common uses. These include "Button", "TreeExpanderButton", "SubGraphExpanderButton", "PanelExpanderButton", "ContextMenuButton", and "CheckBoxButton". "ContextMenuButton"s are typically used inside of "ContextMenu" Panels; "CheckBoxButton"s are used in the implementation of "CheckBox" Panels. </p> <p> These predefined panels can be used as if they were <a href="../api/symbols/Panel.html" target="api">Panel</a>-derived classes in calls to <a href="../api/symbols/GraphObject.html#build" target="api">GraphObject.build</a>. They are implemented as simple visual trees of <a href="../api/symbols/GraphObject.html" target="api">GraphObject</a>s in <a href="../api/symbols/Panel.html" target="api">Panel</a>s, with pre-set properties and event handlers. </p> <p> More information can be found in the <a href="../intro/buttons.html">GoJS Intro</a>. </p> <p> <a href="../samples/index.html#buttons">Related samples</a> </p> <hr> </div> </div> </body>  <script src="../assets/js/goSamples.js"></script> </html>