GoJS/samples/doubleTreeJSON.html at master · xxxspy/GoJS · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE 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>