create-gojs-kit
Version:
A CLI for downloading GoJS samples, extensions, and docs
274 lines (243 loc) • 11.7 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 concept map diagram implemented with labeled links and ForceDirectedLayout." />
<meta itemprop="description" content="A concept map diagram implemented with labeled links and ForceDirectedLayout." />
<meta property="og:description" content="A concept map diagram implemented with labeled links and ForceDirectedLayout." />
<meta name="twitter:description" content="A concept map diagram implemented with labeled links and ForceDirectedLayout." />
<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="Concept Map Showing Idea Nodes Connected by Relationship Links Laid out by Force Directed Layout" />
<meta property="og:title" content="Concept Map Showing Idea Nodes Connected by Relationship Links Laid out by Force Directed Layout" />
<meta name="twitter:title" content="Concept Map Showing Idea Nodes Connected by Relationship Links Laid out by Force Directed Layout" />
<meta property="og:image" content="https://gojs.net/latest/assets/images/screenshots/conceptmap.png" />
<meta itemprop="image" content="https://gojs.net/latest/assets/images/screenshots/conceptmap.png" />
<meta name="twitter:image" content="https://gojs.net/latest/assets/images/screenshots/conceptmap.png" />
<meta property="og:url" content="https://gojs.net/latest/samples/conceptMap.html" />
<meta property="twitter:url" content="https://gojs.net/latest/samples/conceptMap.html" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="og:type" content="website" />
<meta property="twitter:domain" content="gojs.net" />
<title>
Concept Map Showing Idea Nodes Connected by Relationship Links Laid out by Force Directed Layout | 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', {
initialAutoScale: go.AutoScale.Uniform, // an initial automatic zoom-to-fit
contentAlignment: go.Spot.Center, // align document to the center of the viewport
layout: new go.ForceDirectedLayout({ // automatically spread nodes apart
defaultElectricalCharge: 300,
defaultSpringLength: 150
})
});
// define each Node's appearance
myDiagram.nodeTemplate =
new go.Node('Auto', { // the whole node panel
locationSpot: go.Spot.Center
})
.add(
// define the node's outer shape, which will surround the TextBlock
new go.Shape('Rectangle', {
fill: new go.Brush('Linear', { 0: 'rgb(254, 201, 0)', 1: 'rgb(254, 162, 0)' }),
stroke: 'black'
}),
new go.TextBlock({ font: 'bold 10pt helvetica, bold arial, sans-serif', margin: 4 })
.bind('text')
);
// replace the default Link template in the linkTemplateMap
myDiagram.linkTemplate =
new go.Link() // the whole link panel
.add(
new go.Shape({ stroke: 'black' }), // the link shape
new go.Shape({ toArrow: 'standard', stroke: null }), // the arrowhead
new go.Panel('Auto')
.add(
new go.Shape({ // the label background, which becomes transparent around the edges
fill: new go.Brush('Radial', {
0: 'rgb(240, 240, 240)',
0.3: 'rgb(240, 240, 240)',
1: 'rgba(240, 240, 240, 0)'
}),
stroke: null
}),
new go.TextBlock({ // the label text
textAlign: 'center',
font: '10pt helvetica, arial, sans-serif',
stroke: '#555555',
margin: 4
})
.bind('text')
)
);
// create the model for the concept map
const nodeDataArray = [
{ key: 1, text: 'Concept Maps' },
{ key: 2, text: 'Organized Knowledge' },
{ key: 3, text: 'Context Dependent' },
{ key: 4, text: 'Concepts' },
{ key: 5, text: 'Propositions' },
{ key: 6, text: 'Associated Feelings or Affect' },
{ key: 7, text: 'Perceived Regularities' },
{ key: 8, text: 'Labeled' },
{ key: 9, text: 'Hierarchically Structured' },
{ key: 10, text: 'Effective Teaching' },
{ key: 11, text: 'Crosslinks' },
{ key: 12, text: 'Effective Learning' },
{ key: 13, text: 'Events (Happenings)' },
{ key: 14, text: 'Objects (Things)' },
{ key: 15, text: 'Symbols' },
{ key: 16, text: 'Words' },
{ key: 17, text: 'Creativity' },
{ key: 18, text: 'Interrelationships' },
{ key: 19, text: 'Infants' },
{ key: 20, text: 'Different Map Segments' }
];
const linkDataArray = [
{ from: 1, to: 2, text: 'represent' },
{ from: 2, to: 3, text: 'is' },
{ from: 2, to: 4, text: 'is' },
{ from: 2, to: 5, text: 'is' },
{ from: 2, to: 6, text: 'includes' },
{ from: 2, to: 10, text: 'necessary\nfor' },
{ from: 2, to: 12, text: 'necessary\nfor' },
{ from: 4, to: 5, text: 'combine\nto form' },
{ from: 4, to: 6, text: 'include' },
{ from: 4, to: 7, text: 'are' },
{ from: 4, to: 8, text: 'are' },
{ from: 4, to: 9, text: 'are' },
{ from: 5, to: 9, text: 'are' },
{ from: 5, to: 11, text: 'may be' },
{ from: 7, to: 13, text: 'in' },
{ from: 7, to: 14, text: 'in' },
{ from: 7, to: 19, text: 'begin\nwith' },
{ from: 8, to: 15, text: 'with' },
{ from: 8, to: 16, text: 'with' },
{ from: 9, to: 17, text: 'aids' },
{ from: 11, to: 18, text: 'show' },
{ from: 12, to: 19, text: 'begins\nwith' },
{ from: 17, to: 18, text: 'needed\nto see' },
{ from: 18, to: 20, text: 'between' }
];
myDiagram.model = new go.GraphLinksModel(nodeDataArray, linkDataArray);
}
window.addEventListener('DOMContentLoaded', init);
</script>
<div id="sample">
<div
id="myDiagramDiv"
style="background-color: whitesmoke; border: solid 1px black; width: 100%; height: 700px"></div>
<p>
A concept map sample depicting various suggested relationships between different ideas. See also
the
<a href="interactiveForce.html">Interactive Force</a> sample that uses the exact same data but a
different node template and an interactive <a>ForceDirectedLayout</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>Force Directed Layout</h4>
<p>
This predefined layout treats the graph as if it were a system of physical bodies with forces acting on and between them.
The layout iteratively moves nodes and links to minimize the total sum of forces on each node. The resulting layout will normally not contain
overlapping Nodes, excluding cases where the graph is densely interconnected.
More information can be found in the <a href="../intro/layouts.html#ForceDirectedLayout">GoJS Intro</a>.
</p>
<p>
<a href="../samples/index.html#force-directed">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>