create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
833 lines (790 loc) • 32.4 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 showing Japanese royalty." />
<meta itemprop="description" content="A family tree diagram showing Japanese royalty." />
<meta property="og:description" content="A family tree diagram showing Japanese royalty." />
<meta name="twitter:description" content="A family tree diagram showing Japanese royalty." />
<link rel="preconnect" href="https://rsms.me/">
<link rel="stylesheet" href="../assets/css/style.css">
<!-- Copyright 1998-2025 by Northwoods Software Corporation. -->
<meta itemprop="name" content="Family Tree Diagram, Japanese" />
<meta property="og:title" content="Family Tree Diagram, Japanese" />
<meta name="twitter:title" content="Family Tree Diagram, Japanese" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/familytreejp.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/familytreejp.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/familytreejp.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/familyTreeJP.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/familyTreeJP.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Family Tree Diagram, Japanese | GoJS Diagramming Library
</title>
</head>
<body>
<!-- This top nav is not part of the sample code -->
<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">
<!-- * * * * * * * * * * * * * -->
<!-- Start of GoJS sample code -->
<script src="https://cdn.jsdelivr.net/npm/gojs@3.1.0"></script>
<div id="allSampleContent" class="p-4 w-full">
<script id="code">
function init() {
myDiagram = new go.Diagram('myDiagramDiv', {
allowCopy: false,
// create a TreeLayout for the family tree
layout: new go.TreeLayout({ angle: 90, nodeSpacing: 5 })
});
const bluegrad = new go.Brush('Linear', { 0: 'rgb(60, 204, 254)', 1: 'rgb(70, 172, 254)' });
const pinkgrad = new go.Brush('Linear', { 0: 'rgb(255, 192, 203)', 1: 'rgb(255, 142, 203)' });
// Set up a Part as a legend, and place it directly on the diagram
myDiagram.add(
new go.Part('Table', {
layerName: 'ViewportBackground',
alignment: new go.Spot(0, 0, 20, 20)
})
.add(
new go.TextBlock('Key', { row: 0, font: 'bold 10pt Helvetica, Arial, sans-serif' }), // end row 0
new go.Panel('Horizontal', { row: 1, alignment: go.Spot.Left })
.add(
new go.Shape('Rectangle', { desiredSize: new go.Size(30, 30), fill: bluegrad, margin: 5 }),
new go.TextBlock('Males', { font: 'bold 8pt Helvetica, bold Arial, sans-serif' })
), // end row 1
new go.Panel('Horizontal', { row: 2, alignment: go.Spot.Left })
.add(
new go.Shape('Rectangle', { desiredSize: new go.Size(30, 30), fill: pinkgrad, margin: 5 }),
new go.TextBlock('Females', { font: 'bold 8pt Helvetica, bold Arial, sans-serif' })
) // end row 2
)
);
// get tooltip text from the object's data
function tooltipTextConverter(person) {
let 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
const tooltiptemplate = go.GraphObject.build('ToolTip', {
'Border.fill':'whitesmoke',
'Border.stroke': 'black'
})
.add(
new go.TextBlock({
font: 'bold 8pt Helvetica, bold Arial, sans-serif',
wrap: go.Wrap.Fit,
margin: 5
})
.bind('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 =
new go.Node('Auto', {
deletable: false,
toolTip: tooltiptemplate
})
.bind('text', 'name')
.add(
new go.Shape('Rectangle', {
fill: 'orange',
stroke: 'black',
stretch: go.Stretch.Fill,
alignment: go.Spot.Center
})
.bind('fill', 'gender', genderBrushConverter),
new go.Panel('Vertical')
.add(
new go.TextBlock({
font: 'bold 8pt Helvetica, bold Arial, sans-serif',
alignment: go.Spot.Center,
margin: 6
})
.bind('text', 'name'),
new go.TextBlock()
.bind('text', 'kanjiName')
)
);
// define the Link template
myDiagram.linkTemplate =
new go.Link({ // the whole link panel
routing: go.Routing.Orthogonal,
corner: 5, selectable: false
})
.add(
new go.Shape()
); // the default black link shape
// here's the family data
const nodeDataArray = [
{
key: 0,
name: 'Osahito',
gender: 'M',
fullTitle: 'Emperor Kōmei',
kanjiName: '統仁 孝明天皇',
posthumousName: 'Komei',
birthYear: '1831',
deathYear: '1867'
},
{
key: 1,
parent: 0,
name: 'Matsuhito',
gender: 'M',
fullTitle: 'Emperor Meiji',
kanjiName: '睦仁 明治天皇',
posthumousName: 'Meiji',
birthYear: '1852',
deathYear: '1912'
},
{
key: 2,
parent: 1,
name: 'Toshiko',
gender: 'F',
fullTitle: 'Princess Yasu-no-Miya Toshiko',
birthYear: '1896',
deathYear: '1978',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 3,
parent: 2,
name: 'Higashikuni Morihiro',
gender: 'M',
fullTitle: 'Prince Higashikuni Morihiro',
kanjiName: '東久邇宮 盛厚王',
birthYear: '1916',
deathYear: '1969',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 4, parent: 3, name: 'See spouse for descendants' },
{ key: 5, parent: 2, name: 'Moromasa', gender: 'M', fullTitle: 'Prince Moromasa', kanjiName: '師正王', birthYear: '1917', deathYear: '1923' },
{
key: 6,
parent: 2,
name: 'Akitsune',
gender: 'M',
fullTitle: 'Prince Akitsune',
kanjiName: '彰常王',
birthYear: '1920',
deathYear: '2006',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 7,
parent: 2,
name: 'Toshihiko',
gender: 'M',
fullTitle: 'Prince Toshihiko',
kanjiName: '俊彦王',
birthYear: '1929',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 8,
parent: 1,
name: 'Yoshihito',
gender: 'M',
fullTitle: 'Emperor Taishō',
kanjiName: '嘉仁 大正天皇,',
posthumousName: 'Taisho',
birthYear: '1879',
deathYear: '1926'
},
{
key: 9,
parent: 8,
name: 'Hirohito',
gender: 'M',
fullTitle: 'Emperor Showa',
kanjiName: '裕仁 昭和天皇',
posthumousName: 'Showa',
birthYear: '1901',
deathYear: '1989'
},
{
key: 10,
parent: 9,
name: 'Higashikuni Shigeko',
gender: 'F',
spouse: 'Higashikuni Morihiro',
spouseKanji: '東久邇宮 盛厚王',
fullTitle: 'Princess Shigeko Higashikuni',
kanjiName: '東久邇成子',
birthYear: '1925',
deathYear: '1961',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 11,
parent: 10,
name: 'Higashikuni Nobuhiko',
gender: 'M',
fullTitle: 'Prince Higashikuni Nobuhiko',
kanjiName: '東久邇宮 信彦王',
birthYear: '1945',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 12, parent: 11, name: 'Higashikuni Yukihiko', gender: 'M', fullTitle: 'No Title', birthYear: '1974' },
{
key: 13,
parent: 10,
name: 'Higashikuni Fumiko',
gender: 'F',
fullTitle: 'Princess Higashikuni Fumiko',
kanjiName: '文子女王',
birthYear: '1946',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 14, parent: 10, name: 'Higashikuni Naohiko', gender: 'M', fullTitle: 'No Title', kanjiName: '東久邇真彦', birthYear: '1948' },
{ key: 15, parent: 14, name: 'Higashikuni Teruhiko', gender: 'M', fullTitle: 'No Title' },
{ key: 16, parent: 14, name: 'Higashikuni Matsuhiko', gender: 'M', fullTitle: 'No Title' },
{ key: 17, parent: 10, name: 'Higashikuni Hidehiko', gender: 'M', fullTitle: 'No Title', kanjiName: '東久邇基博', birthYear: '1949' },
{ key: 18, parent: 10, name: 'Higashikuni Yuko', gender: 'F', fullTitle: 'No Title', kanjiName: '東久邇優子', birthYear: '1950' },
{ key: 19, parent: 9, name: 'Sachiko', gender: 'F', fullTitle: 'Princess Sachiko', kanjiName: '久宮祐子', birthYear: '1927', deathYear: '1928' },
{
key: 20,
parent: 9,
name: 'Kazuko Takatsukasa',
gender: 'F',
fullTitle: 'Kazuko, Princess Taka',
kanjiName: '鷹司 和子',
birthYear: '1929',
deathYear: '1989',
statusChange: 'In 1950, lost imperial family status by marrying a commoner'
},
{
key: 21,
parent: 9,
name: 'Atsuko Ikeda',
gender: 'F',
fullTitle: 'Atsuko, Princess Yori',
kanjiName: '池田厚子',
birthYear: '1931',
statusChange: 'In 1952, lost imperial family status by marrying a commoner'
},
{
key: 22,
parent: 9,
name: 'Akihito',
gender: 'M',
fullTitle: 'Reigning Emperor of Japan; Tennō',
kanjiName: '明仁 今上天皇',
posthumousName: 'Heisei',
birthYear: '1933'
},
{
key: 23,
parent: 22,
name: 'Naruhito',
gender: 'M',
fullTitle: 'Naruhito, Crown Prince of Japan',
kanjiName: '皇太子徳仁親王',
orderInSuccession: '1',
birthYear: '1960'
},
{ key: 24, parent: 23, name: 'Aiko', gender: 'F', fullTitle: 'Aiko, Princess Toshi', kanjiName: '敬宮愛子内親王', birthYear: '2001' },
{
key: 25,
parent: 22,
name: 'Fumihito',
gender: 'M',
fullTitle: 'Fumihito, Prince Akishino',
kanjiName: '秋篠宮文仁親王',
orderInSuccession: '2',
birthYear: '1965'
},
{ key: 26, parent: 25, name: 'Mako', gender: 'F', fullTitle: 'Princess Mako of Akishino', kanjiName: '眞子内親王', birthYear: '1991' },
{ key: 27, parent: 25, name: 'Kako', gender: 'F', fullTitle: 'Princess Kako of Akishino', kanjiName: '佳子内親王', birthYear: '1994' },
{
key: 28,
parent: 25,
name: 'Hisahito',
gender: 'M',
fullTitle: 'Prince Hisahito of Akishino',
kanjiName: '悠仁親王',
orderInSuccession: '3',
birthYear: '2006'
},
{
key: 29,
parent: 22,
name: 'Sayako Kuroda',
gender: 'F',
fullTitle: 'Princess Sayako of Japan',
kanjiName: '黒田清子',
birthYear: '1969',
statusChange: 'In 2005, lost imperial family status by marrying a commoner'
},
{
key: 30,
parent: 9,
name: 'Masahito',
gender: 'M',
fullTitle: 'Masahito, Prince Hitachi',
kanjiName: '常陸宮正仁親王',
orderInSuccession: '4',
birthYear: '1935'
},
{
key: 31,
parent: 9,
name: 'Takako Shimazu',
gender: 'F',
fullTitle: 'Princess Takako',
kanjiName: '島津貴子',
birthYear: '1939',
statusChange: 'In 1960, lost imperial family status by marrying a commoner'
},
{ key: 32, parent: 31, name: 'Yorihisa Shimazu', gender: 'M', fullTitle: 'No Title', birthYear: '1962' },
{
key: 33,
parent: 8,
name: 'Yasuhito',
gender: 'M',
fullTitle: 'Yasuhito, Prince Chichibu of Japan',
kanjiName: '秩父宮 雍仁',
birthYear: '1902',
deathYear: '1953'
},
{
key: 34,
parent: 8,
name: 'Nobuhito',
gender: 'M',
fullTitle: 'Nobuhito, Prince Takamatsu',
kanjiName: '高松宮宣仁親王',
birthYear: '1905',
deathYear: '1987'
},
{
key: 35,
parent: 8,
name: 'Takahito',
gender: 'M',
fullTitle: 'Takahito, Prince Mikasa',
kanjiName: '三笠宮崇仁親王',
orderInSuccession: '5',
birthYear: '1915'
},
{
key: 36,
parent: 35,
name: 'Yasuko Konoe',
gender: 'F',
fullTitle: 'Princess Yasuko of Mikasa',
kanjiName: '甯子内親王',
birthYear: '1944',
statusChange: 'In 1966, lost imperial family stutus by marrying a commoner'
},
{ key: 37, parent: 36, name: 'Tadahiro', gender: 'M', fullTitle: 'None' },
{
key: 38,
parent: 35,
name: 'Tomihito',
gender: 'M',
fullTitle: 'Prince Tomohito of Mikasa',
kanjiName: '三笠宮寬仁',
orderInSuccession: '6',
birthYear: '1946'
},
{ key: 39, parent: 38, name: 'Akiko', gender: 'F', fullTitle: 'Princess Akiko of Mikasa', kanjiName: '彬子女王', birthYear: '1981' },
{ key: 40, parent: 38, name: 'Yoko', gender: 'F', fullTitle: 'Princess Yoko of Mikasa', kanjiName: '瑶子女王', birthYear: '1983' },
{
key: 41,
parent: 35,
name: 'Yoshihito',
gender: 'M',
fullTitle: 'Yoshihito, Prince Katsura',
kanjiName: '桂宮 宜仁親王',
orderInSuccession: '7',
birthYear: '1948'
},
{
key: 42,
parent: 35,
name: 'Masako Sen',
gender: 'F',
fullTitle: 'Princess Masako of Mikasa',
kanjiName: '容子内親王',
birthYear: '1951',
statusChange: 'In 1983, lost imperial family status by marrying a commoner'
},
{ key: 43, parent: 42, name: 'Akifumi', gender: 'M', fullTitle: 'No Title' },
{ key: 44, parent: 42, name: 'Takafumi', gender: 'M', fullTitle: 'No Title' },
{ key: 45, parent: 42, name: 'Makiko', gender: 'F', fullTitle: 'No Title' },
{
key: 46,
parent: 35,
name: 'Norihito',
gender: 'M',
fullTitle: 'Norihito, Prince Takamado',
kanjiName: '高円宮憲仁親王',
birthYear: '1954',
deathYear: '2002'
},
{ key: 47, parent: 46, name: 'Tsuguko', gender: 'F', fullTitle: 'Princess Tsuguko of Takamado', kanjiName: '承子女王', birthYear: '1986' },
{ key: 48, parent: 46, name: 'Noriko', gender: 'F', fullTitle: 'Princess Noriko of Takamado', kanjiName: '典子女王', birthYear: '1988' },
{ key: 49, parent: 46, name: 'Ayako', gender: 'F', fullTitle: 'Princess Ayako of Takamado', kanjiName: '絢子女王', birthYear: '1990' },
{ key: 50, parent: 1, name: 'Masako', gender: 'F', fullTitle: 'Princess Masako of Tsune', birthYear: '1888', deathYear: '1940' },
{
key: 51,
parent: 50,
name: 'Takeda Tsuneyoshi',
gender: 'M',
fullTitle: 'Prince Takeda Tsunehisa',
kanjiName: '竹田宮恒徳王',
birthYear: '1909',
deathYear: '1992',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 52,
parent: 51,
name: 'Takeda Tsunetada',
gender: 'M',
fullTitle: 'Prince Takeda Tsunetada',
kanjiName: '竹田恒正王',
birthYear: '1940',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 53, parent: 52, name: 'Takeda Tsunetaka', gender: 'M', fullTitle: 'No Title', birthYear: '1967' },
{ key: 54, parent: 52, name: 'Takeda Hiroko', gender: 'M', fullTitle: 'No Title', birthYear: '1971' },
{
key: 55,
parent: 51,
name: 'Takeda Motoko',
gender: 'F',
fullTitle: 'Princess Takeda Motoko',
kanjiName: '素子女王',
birthYear: '1942',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 56,
parent: 51,
name: 'Takeda Tsunekazu',
gender: 'M',
fullTitle: 'No Title',
kanjiName: '竹田恒和王',
birthYear: '1944',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 57,
parent: 51,
name: 'Takeda Noriko',
gender: 'F',
fullTitle: 'Princess Takeda Noriko',
kanjiName: '紀子女王',
birthYear: '1943',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 58,
parent: 51,
name: 'Tsuneharu Takeda',
gender: 'M',
fullTitle: 'Prince Tsuneharu Takeda',
kanjiName: '竹田恒治王',
birthYear: '1945',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 59,
parent: 50,
name: 'Takeda Ayako',
gender: 'F',
fullTitle: 'Princess Tsune-no-Miya Takeda Ayako',
kanjiName: '禮子女王',
birthYear: '1911',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 60, parent: 1, name: 'Fusako', gender: 'F', fullTitle: 'Princess Fusako of Kane', birthYear: '1890', deathYear: '1974' },
{
key: 61,
parent: 60,
name: 'Kitashirakawa Nagahisa',
gender: 'M',
fullTitle: 'Prince Kitashirakawa Nagahisa',
kanjiName: '北白川宮永久王',
birthYear: '1910',
deathYear: '1940'
},
{
key: 62,
parent: 61,
name: 'Kitashirakawa Michihisa',
gender: 'M',
fullTitle: 'Prince Kitashirakawa Michihisa',
birthYear: '1937',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 63, parent: 62, name: 'Kitashirakawa Naoko', gender: 'F', fullTitle: 'No Title', birthYear: '1969' },
{ key: 64, parent: 62, name: 'Kitashirakawa Nobuko', gender: 'F', fullTitle: 'No Title', birthYear: '1971' },
{ key: 65, parent: 62, name: 'Kitashirakawa Akiko', gender: 'F', fullTitle: 'No Title', birthYear: '1973' },
{
key: 66,
parent: 61,
name: 'Hatsuko',
gender: 'F',
fullTitle: 'Princess Hatsuko',
birthYear: '1939',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 67,
parent: 60,
name: 'Kitashirakawa Mineko',
gender: 'F',
fullTitle: 'Princess Kitashirakawa Mineko',
kanjiName: '美年子女王',
birthYear: '1910',
deathYear: '1970',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 68,
parent: 60,
name: 'Kitashirakawa Sawako',
gender: 'F',
fullTitle: 'Princess Kitashirakawa Sawako',
kanjiName: '佐和子女王',
birthYear: '1913',
deathYear: '2001',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 69,
parent: 60,
name: 'Kitashirakawa Taeko',
gender: 'F',
fullTitle: 'Princess Kitashirakawa Taeko',
kanjiName: '多惠子女王',
birthYear: '1920',
deathYear: '1954',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 70, parent: 1, name: 'Nobuko', gender: 'F', fullTitle: 'Princess Fumi-no-Miya Nobuko', birthYear: '1891', deathYear: '1933' },
{
key: 71,
parent: 70,
name: 'Asaka Kikuko',
gender: 'F',
fullTitle: 'Princess Asaka Kikuko',
kanjiName: '紀久子',
birthYear: '1911',
deathYear: '1989',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{
key: 72,
parent: 70,
name: 'Asaka Takahiko',
gender: 'M',
fullTitle: 'Prince Asaka Takahiko',
kanjiName: '朝香 孚彦',
birthYear: '1913',
deathYear: '1994',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 73, parent: 72, name: 'Fukuko', gender: 'F', fullTitle: 'No Title' },
{ key: 74, parent: 72, name: 'Minoko', gender: 'F', fullTitle: 'No Title' },
{ key: 75, parent: 72, name: 'Tomohiko', gender: 'M', fullTitle: 'No Title' },
{
key: 76,
parent: 70,
name: 'Asaka Tadahito',
gender: 'M',
fullTitle: 'Prince Asaka Tadahito',
kanjiName: '朝香正彦',
birthYear: '1914',
deathYear: '1944'
},
{
key: 77,
parent: 70,
name: 'Asaka Kiyoko',
gender: 'F',
fullTitle: 'Princess Asaka Kiyoko',
kanjiName: '湛子',
birthYear: '1919',
statusChange: 'In 1947, lost imperial family status due to American abrogation of Japanese nobility'
},
{ key: 78, parent: 1, name: 'Ten Other Children Not Surviving Infancy' },
{ key: 79, parent: 0, name: 'Five Other Children Not Surviving Infancy' }
];
// create the model for the family tree
myDiagram.model = new go.TreeModel(nodeDataArray);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 600px"></div>
<p>For a variation of this tree, see the <a href="familyTree.html">British 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>
<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>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Table Panels</h4>
<p>
The "Table" Panel, <a href="../api/symbols/Panel.html#static-Table" target="api">Panel.Table</a>, arranges objects in rows and columns.
Each object in a Table Panel is put into the cell indexed by the value of <a href="../api/symbols/GraphObject.html#row" target="api">GraphObject.row</a> and <a href="../api/symbols/GraphObject.html#column" target="api">GraphObject.column</a>.
The panel will look at the rows and columns for all of the objects in the panel to determine how many rows and columns the table should have.
More information can be found in the <a href="../intro/tablePanels.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tables">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<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>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>ToolTips</h4>
<p>
A tooltip is an <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shown when the mouse hovers over an object that has its <a href="../api/symbols/GraphObject.html#toolTip" target="api">GraphObject.toolTip</a> set.
The tooltip part is bound to the same data as the part itself.
</p>
<p>
It is typical to implement a tooltip as a "ToolTip" Panel holding a <a href="../api/symbols/TextBlock.html" target="api">TextBlock</a> or a Panel of TextBlocks and other objects.
Each "ToolTip" is just an "Auto" Panel <a href="../api/symbols/Adornment.html" target="api">Adornment</a> that is shadowed, and where the border is a rectangular <a href="../api/symbols/Shape.html" target="api">Shape</a> with a light gray fill.
However you can implement the tooltip as any arbitrarily complicated Adornment.
</p>
<p>
More information can be found in the <a href="../intro/tooltips.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#tooltips">Related samples</a>
</p>
<hr>
<!-- blacklist tags that do not correspond to a specific GoJS feature -->
<h4>Legend</h4>
<p>
A Legend can be created for a Diagram using a simple <a>Part</a>.
Typically that is added directly to the Diagram as an unmodeled Part, not as a template with data in the Model.
However you may want to define a template and add a legend data object to the model so that
you can parameterize the legend with information persisted with the model.
</p>
<p>
Usually a legend will be created as an "Auto" Panel for a border around a "Table" Panel
holding information about the types of nodes and/or links that are in the diagram.
</p>
<p>
It probably will want to be in the "ViewportBackground" or "ViewportForeground" Layer so that it is always
visible in the viewport despite scrolling or zooming.
Set the <a>GraphObject.alignment</a> property to position it where you want it to be;
by default it will be in the lower right corner.
However you may want to treat the legend Part as a regular Part in the Diagram, possibly laid out by
the diagram's <a>Diagram.layout</a>.
</p>
<p>
More information can be found in the <a href="../intro/legends.html">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#legend">Related samples</a>
</p>
<hr>
</div>
</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>