gojs
Version:
Interactive diagrams, charts, and graphs, such as trees, flowcharts, orgcharts, UML, BPMN, or business diagrams
99 lines (89 loc) • 4.62 kB
HTML
<html>
<head>
<meta charset="UTF-8">
<title>Double Tree from JSON</title>
<meta name="description" content="Layout of two trees in opposite directions, assuming a single root, loaded from the server as JSON-formatted data." />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Copyright 1998-2020 by Northwoods Software Corporation. -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../release/go.js"></script>
<script src="../extensions/DoubleTreeLayout.js"></script>
<script src="../assets/js/goSamples.js"></script> <!-- this is only for the GoJS Samples framework -->
<script id="code">
function init() {
if (window.goSamples) goSamples(); // init for these samples -- you don't need to call this
// Within this function override the definition of '$' from jQuery:
var $ = go.GraphObject.make; // for conciseness in defining templates in this function
myDiagram =
$(go.Diagram, "myDiagramDiv",
{
layout: $(DoubleTreeLayout,
{
//vertical: true, // default directions are horizontal
// choose whether this subtree is growing towards the right or towards the left:
directionFunction: function(n) { return n.data && n.data.dir !== "left"; }
// controlling the parameters of each TreeLayout:
//bottomRightOptions: { nodeSpacing: 0, layerSpacing: 20 },
//topLeftOptions: { alignment: go.TreeLayout.AlignmentStart },
})
});
// define all of the gradient brushes
var graygrad = $(go.Brush, "Linear", { 0: "#F5F5F5", 1: "#F1F1F1" });
var bluegrad = $(go.Brush, "Linear", { 0: "#CDDAF0", 1: "#91ADDD" });
var yellowgrad = $(go.Brush, "Linear", { 0: "#FEC901", 1: "#FEA200" });
var lavgrad = $(go.Brush, "Linear", { 0: "#EF9EFA", 1: "#A570AD" });
myDiagram.nodeTemplate =
$(go.Node, "Auto",
{ isShadowed: true },
// define the node's outer shape
$(go.Shape, "RoundedRectangle",
{ fill: graygrad, stroke: "#D8D8D8" }, // default fill is gray
new go.Binding("fill", "color")),
// define the node's text
$(go.TextBlock,
{ margin: 5, font: "bold 11px Helvetica, bold Arial, sans-serif" },
new go.Binding("text", "key"))
);
myDiagram.linkTemplate =
$(go.Link, // the whole link panel
{ selectable: false },
$(go.Shape)); // the link shape
// The previous initialization is the same as the doubleTree.html sample.
// Here we request JSON-format text data from the server,
// in this case from a static file so that you can view its contents separately.
jQuery.getJSON("doubleTree.json", load);
}
function load(jsondata) {
// The top-level object has three properties, two of which we ignore.
// This example assumes that the "nodes" property has the array of node data objects in it.
// But your data is certainly going to be in a different structure,
// so you need to figure out how to get an array of node data objects.
// create the model for the double tree
myDiagram.model = new go.TreeModel(jsondata["nodes"]);
// The rest of the code is the same as the doubleTree.html sample
}
</script>
</head>
<body onload="init()">
<div id="sample">
<div id="myDiagramDiv" style="background-color: white; border: solid 1px black; width: 100%; height: 500px"></div>
<p>
This sample is exactly like the <a href="doubleTree.html">Double Tree</a> sample,
but this gets its data by getting JSON content from the server.
In this case the data is in a static file named <a href="doubleTree.json" target="_blank">doubleTree.json</a>.
</p>
<p>
This sample displays a diagram of two trees sharing a single root node growing in opposite directions.
The immediate child data of the ROOT node have a "dir" property
that describes the direction that subtree should grow.
</p>
<p>
The <a>Diagram.layout</a> is an instance of the <a>DoubleTreeLayout</a> extension layout,
defined in <a href="../extensions/DoubleTreeLayout.js">extensions/DoubleTreeLayout.js</a>.
The layout requires a <a>DoubleTreeLayout.directionFunction</a> predicate to decide for a child node
of the root node which way the subtree should grow.
</p>
</div>
</body>
</html>