gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
270 lines (252 loc) • 17.1 kB
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 family tree diagram of British royalty."/>
<link rel="stylesheet" href="../assets/css/style.css"/>
<!-- Copyright 1998-2023 by Northwoods Software Corporation. -->
<title>Family Tree (British)</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<nav id="navTop" class="w-full z-30 top-0 text-white bg-nwoods-primary">
<div class="w-full container max-w-screen-lg mx-auto flex flex-wrap sm:flex-nowrap items-center justify-between mt-0 py-2">
<div class="md:pl-4">
<a class="text-white hover:text-white no-underline hover:no-underline
font-bold text-2xl lg:text-4xl rounded-lg hover:bg-nwoods-secondary " href="../">
<h1 class="my-0 p-1 ">GoJS</h1>
</a>
</div>
<button id="topnavButton" class="rounded-lg sm:hidden focus:outline-none focus:ring" aria-label="Navigation">
<svg fill="currentColor" viewBox="0 0 20 20" class="w-6 h-6">
<path id="topnavOpen" fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM9 15a1 1 0 011-1h6a1 1 0 110 2h-6a1 1 0 01-1-1z" clip-rule="evenodd"></path>
<path id="topnavClosed" class="hidden" fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
</button>
<div id="topnavList" class="hidden sm:block items-center w-auto mt-0 text-white p-0 z-20">
<ul class="list-reset list-none font-semibold flex justify-end flex-wrap sm:flex-nowrap items-center px-0 pb-0">
<li class="p-1 sm:p-0"><a class="topnav-link" href="../learn/">Learn</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../samples/">Samples</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../intro/">Intro</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../api/">API</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/products/register.html">Register</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="../download.html">Download</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://forum.nwoods.com/c/gojs/11">Forum</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/contact.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/contact.html', 'contact');">Contact</a></li>
<li class="p-1 sm:p-0"><a class="topnav-link" href="https://www.nwoods.com/sales/index.html"
target="_blank" rel="noopener" onclick="getOutboundLink('https://www.nwoods.com/sales/index.html', 'buy');">Buy</a></li>
</ul>
</div>
</div>
<hr class="border-b border-gray-600 opacity-50 my-0 py-0" />
</nav>
<div class="md:flex flex-col md:flex-row md:min-h-screen w-full max-w-screen-xl mx-auto">
<div id="navSide" class="flex flex-col w-full md:w-48 text-gray-700 bg-white flex-shrink-0"></div>
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="../release/go.js"></script>
<div id="allSampleContent" class="p-4 w-full">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'>
<script id="code">
function init() {
// Since 2.2 you can also author concise templates with method chaining instead of GraphObject.make
// For details, see https://gojs.net/latest/intro/buildingObjects.html
const $ = go.GraphObject.make; // for conciseness in defining templates
myDiagram =
new go.Diagram("myDiagramDiv", // must be the ID or reference to div
{
"toolManager.hoverDelay": 100, // 100 milliseconds instead of the default 850
allowCopy: false,
layout: // create a TreeLayout for the family tree
$(go.TreeLayout,
{ angle: 90, nodeSpacing: 10, layerSpacing: 40, layerStyle: go.TreeLayout.LayerUniform })
});
var bluegrad = '#90CAF9';
var pinkgrad = '#F48FB1';
// Set up a Part as a legend, and place it directly on the diagram
myDiagram.add(
$(go.Part, "Table",
{ position: new go.Point(300, 10), selectable: false },
$(go.TextBlock, "Key",
{ row: 0, font: "700 14px Droid Serif, sans-serif" }), // end row 0
$(go.Panel, "Horizontal",
{ row: 1, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
$(go.TextBlock, "Males",
{ font: "700 13px Droid Serif, sans-serif" })
), // end row 1
$(go.Panel, "Horizontal",
{ row: 2, alignment: go.Spot.Left },
$(go.Shape, "Rectangle",
{ desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
$(go.TextBlock, "Females",
{ font: "700 13px Droid Serif, sans-serif" })
) // end row 2
));
// get tooltip text from the object's data
function tooltipTextConverter(person) {
var str = "";
str += "Born: " + person.birthYear;
if (person.deathYear !== undefined) str += "\nDied: " + person.deathYear;
if (person.reign !== undefined) str += "\nReign: " + person.reign;
return str;
}
// define tooltips for nodes
var tooltiptemplate =
$("ToolTip",
{ "Border.fill": "whitesmoke", "Border.stroke": "black" },
$(go.TextBlock,
{
font: "bold 8pt Helvetica, bold Arial, sans-serif",
wrap: go.TextBlock.WrapFit,
margin: 5
},
new go.Binding("text", "", tooltipTextConverter))
);
// define Converters to be used for Bindings
function genderBrushConverter(gender) {
if (gender === "M") return bluegrad;
if (gender === "F") return pinkgrad;
return "orange";
}
// replace the default Node template in the nodeTemplateMap
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ deletable: false, toolTip: tooltiptemplate },
new go.Binding("text", "name"),
$(go.Shape, "Rectangle",
{
fill: "lightgray",
stroke: null, strokeWidth: 0,
stretch: go.GraphObject.Fill,
alignment: go.Spot.Center
},
new go.Binding("fill", "gender", genderBrushConverter)),
$(go.TextBlock,
{
font: "700 12px Droid Serif, sans-serif",
textAlign: "center",
margin: 10, maxSize: new go.Size(80, NaN)
},
new go.Binding("text", "name"))
);
// define the Link template
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ routing: go.Link.Orthogonal, corner: 5, selectable: false },
$(go.Shape, { strokeWidth: 3, stroke: '#424242' })); // the gray link shape
// here's the family data
var nodeDataArray = [
{ key: 0, name: "George V", gender: "M", birthYear: "1865", deathYear: "1936", reign: "1910-1936" },
{ key: 1, parent: 0, name: "Edward VIII", gender: "M", birthYear: "1894", deathYear: "1972", reign: "1936" },
{ key: 2, parent: 0, name: "George VI", gender: "M", birthYear: "1895", deathYear: "1952", reign: "1936-1952" },
{ key: 7, parent: 2, name: "Elizabeth II", gender: "F", birthYear: "1926", reign: "1952-" },
{ key: 16, parent: 7, name: "Charles, Prince of Wales", gender: "M", birthYear: "1948" },
{ key: 38, parent: 16, name: "Prince William", gender: "M", birthYear: "1982" },
{ key: 39, parent: 16, name: "Prince Harry of Wales", gender: "M", birthYear: "1984" },
{ key: 17, parent: 7, name: "Anne, Princess Royal", gender: "F", birthYear: "1950" },
{ key: 40, parent: 17, name: "Peter Phillips", gender: "M", birthYear: "1977" },
{ key: 82, parent: 40, name: "Savannah Phillips", gender: "F", birthYear: "2010" },
{ key: 41, parent: 17, name: "Zara Phillips", gender: "F", birthYear: "1981" },
{ key: 18, parent: 7, name: "Prince Andrew", gender: "M", birthYear: "1960" },
{ key: 42, parent: 18, name: "Princess Beatrice of York", gender: "F", birthYear: "1988" },
{ key: 43, parent: 18, name: "Princess Eugenie of York", gender: "F", birthYear: "1990" },
{ key: 19, parent: 7, name: "Prince Edward", gender: "M", birthYear: "1964" },
{ key: 44, parent: 19, name: "Lady Louise Windsor", gender: "F", birthYear: "2003" },
{ key: 45, parent: 19, name: "James, Viscount Severn", gender: "M", birthYear: "2007" },
{ key: 8, parent: 2, name: "Princess Margaret", gender: "F", birthYear: "1930", deathYear: "2002" },
{ key: 20, parent: 8, name: "David Armstrong-Jones", gender: "M", birthYear: "1961" },
{ key: 21, parent: 8, name: "Lady Sarah Chatto", gender: "F", birthYear: "1964" },
{ key: 46, parent: 21, name: "Samuel Chatto", gender: "M", birthYear: "1996" },
{ key: 47, parent: 21, name: "Arthur Chatto", gender: "M", birthYear: "1999" },
{ key: 3, parent: 0, name: "Mary, Princess Royal", gender: "F", birthYear: "1897", deathYear: "1965" },
{ key: 9, parent: 3, name: "George Lascelles", gender: "M", birthYear: "1923", deathYear: "2011" },
{ key: 22, parent: 9, name: "David Lascelles", gender: "M", birthYear: "1950" },
{ key: 48, parent: 22, name: "Emily Shard", gender: "F", birthYear: "1975" },
{ key: 49, parent: 22, name: "Benjamin Lascelles", gender: "M", birthYear: "1978" },
{ key: 50, parent: 22, name: "Alexander Lascelles", gender: "M", birthYear: "1980" },
{ key: 51, parent: 22, name: "Edward Lascelles", gender: "M", birthYear: "1982" },
{ key: 23, parent: 9, name: "James Lascelles", gender: "M", birthYear: "1953" },
{ key: 52, parent: 23, name: "Sophie Lascelles", gender: "F", birthYear: "1973" },
{ key: 53, parent: 23, name: "Rowan Lascelles", gender: "M", birthYear: "1977" },
{ key: 54, parent: 23, name: "Tanit Lascelles", gender: "F", birthYear: "1981" },
{ key: 55, parent: 23, name: "Tewa Lascelles", gender: "M", birthYear: "1985" },
{ key: 24, parent: 9, name: "Jeremy Lascelles", gender: "M", birthYear: "1955" },
{ key: 56, parent: 24, name: "Thomas Lascelles", gender: "M", birthYear: "1982" },
{ key: 57, parent: 24, name: "Ellen Lascelles", gender: "F", birthYear: "1984" },
{ key: 58, parent: 24, name: "Amy Lascelles", gender: "F", birthYear: "1986" },
{ key: 59, parent: 24, name: "Tallulah Lascelles", gender: "F", birthYear: "2005" },
{ key: 25, parent: 9, name: "Mark Lascelles", gender: "M", birthYear: "1964" },
{ key: 60, parent: 25, name: "Charlotte Lascelles", gender: "F", birthYear: "1996" },
{ key: 61, parent: 25, name: "Imogen Lascelles", gender: "F", birthYear: "1998" },
{ key: 62, parent: 25, name: "Miranda Lascelles", gender: "F", birthYear: "2000" },
{ key: 10, parent: 3, name: "Gerald Lascelles", gender: "M", birthYear: "1924", deathYear: "1998" },
{ key: 26, parent: 10, name: "Henry Lascelles", gender: "M", birthYear: "1953" },
{ key: 63, parent: 26, name: "Maximilian Lascelles", gender: "M", birthYear: "1991" },
{ key: 27, parent: 10, name: "Martin David Lascelles", gender: "M", birthYear: "1962" },
{ key: 64, parent: 27, name: "Alexander Lascelles", gender: "M", birthYear: "2002" },
{ key: 4, parent: 0, name: "Prince Henry", gender: "M", birthYear: "1900", deathYear: "1974" },
{ key: 11, parent: 4, name: "Prince William of Gloucester", gender: "M", birthYear: "1941", deathYear: "1972" },
{ key: 12, parent: 4, name: "Prince Richard", gender: "M", birthYear: "1944" },
{ key: 28, parent: 12, name: "Alexander Windsor", gender: "M", birthYear: "1974" },
{ key: 65, parent: 28, name: "Xan Windsor", gender: "M", birthYear: "2007" },
{ key: 66, parent: 28, name: "Lady Cosima Windsor", gender: "F", birthYear: "2010" },
{ key: 29, parent: 12, name: "Lady Davina Lewis", gender: "F", birthYear: "1977" },
{ key: 67, parent: 29, name: "Senna Lewis", gender: "F", birthYear: "2010" },
{ key: 30, parent: 12, name: "Lady Rose Gilman", gender: "F", birthYear: "1980" },
{ key: 68, parent: 30, name: "Lyla Gilman", gender: "F", birthYear: "2010" },
{ key: 5, parent: 0, name: "Prince George", gender: "M", birthYear: "1902", deathYear: "1942" },
{ key: 13, parent: 5, name: "Prince Edward", gender: "M", birthYear: "1935" },
{ key: 31, parent: 13, name: "George Windsor", gender: "M", birthYear: "1962" },
{ key: 69, parent: 31, name: "Edward Windsor", gender: "M", birthYear: "1988" },
{ key: 70, parent: 31, name: "Lady Marina-Charlotte Windsor", gender: "F", birthYear: "1992" },
{ key: 71, parent: 31, name: "Lady Amelia Windsor", gender: "F", birthYear: "1995" },
{ key: 32, parent: 13, name: "Lady Helen Taylor", gender: "F", birthYear: "1964" },
{ key: 72, parent: 32, name: "Columbus Taylor", gender: "M", birthYear: "1994" },
{ key: 73, parent: 32, name: "Cassius Taylor", gender: "M", birthYear: "1996" },
{ key: 74, parent: 32, name: "Eloise Taylor", gender: "F", birthYear: "2003" },
{ key: 75, parent: 32, name: "Estella Taylor", gender: "F", birthYear: "2004" },
{ key: 33, parent: 13, name: "Lord Nicholas Windsor", gender: "M", birthYear: "1970" },
{ key: 76, parent: 33, name: "Albert Windsor", gender: "M", birthYear: "2007" },
{ key: 77, parent: 33, name: "Leopold Windsor", gender: "M", birthYear: "2009" },
{ key: 14, parent: 5, name: "Princess Alexandra", gender: "F", birthYear: "1936" },
{ key: 34, parent: 14, name: "James Ogilvy", gender: "M", birthYear: "1964" },
{ key: 78, parent: 34, name: "Flora Ogilvy", gender: "F", birthYear: "1994" },
{ key: 79, parent: 34, name: "Alexander Ogilvy", gender: "M", birthYear: "1996" },
{ key: 35, parent: 14, name: "Marina Ogilvy", gender: "F", birthYear: "1966" },
{ key: 80, parent: 35, name: "Zenouska Mowatt", gender: "F", birthYear: "1990" },
{ key: 81, parent: 35, name: "Christian Mowatt", gender: "M", birthYear: "1993" },
{ key: 15, parent: 5, name: "Prince Michael of Kent", gender: "M", birthYear: "1942" },
{ key: 36, parent: 15, name: "Lord Frederick Windsor", gender: "M", birthYear: "1979" },
{ key: 37, parent: 15, name: "Lady Gabriella Windsor", gender: "F", birthYear: "1981" },
{ key: 6, parent: 0, name: "Prince John", gender: "M", birthYear: "1905", deathYear: "1919" }
];
// create the model for the family tree
myDiagram.model = new go.TreeModel(nodeDataArray);
document.getElementById('zoomToFit').addEventListener('click', () => myDiagram.commandHandler.zoomToFit());
document.getElementById('centerRoot').addEventListener('click', () => {
myDiagram.scale = 1;
myDiagram.scrollToRect(myDiagram.findNodeForKey(0).actualBounds);
});
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 550px"></div>
<p><button id="zoomToFit">Zoom to Fit</button> <button id="centerRoot">Center on root</button></p>
<p>This family tree diagram shows several generations of British royalty beginning with George V (1865-1936).</p>
<p><a>Node</a> data contains information about gender, and a data binding assigns a corresponding color. Additional data is displayed with a tooltip. A key is placed on the diagram using a <a>Panel,Table</a>.</p>
<p>For a variation of this tree, see the <a href="familyTreeJP.html">Japanese family tree sample</a>.</p>
<p>For a more complex family tree see the <a href="genogram.html">genogram sample</a>.</p>
</div>
</div>
<!-- * * * * * * * * * * * * * -->
<!-- End of GoJS sample code -->
</div>
</body>
<!-- This script is part of the gojs.net website, and is not needed to run the sample -->
<script src="../assets/js/goSamples.js"></script>
</html>