updated tree view, now we can change width and height of the canvas

Author: eosfor

PSGraph.Vega.Extensions/Assets/vega.tree.layout.json

@@ -1,118 +1,106 @@
 {
-  "$schema": "https://vega.github.io/schema/vega/v5.json",
-  "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
-  "width": 1000,
-  "height": 1000,
-  "padding": 5,
-
-  "signals": [
-    {
-      "name": "labels", "value": true,
-      "bind": {"input": "checkbox"}
-    },
-    {
-      "name": "layout", "value": "tidy",
-      "bind": {"input": "radio", "options": ["tidy", "cluster"]}
-    },
-    {
-      "name": "links", "value": "diagonal",
-      "bind": {
-        "input": "select",
-        "options": ["line", "curve", "diagonal", "orthogonal"]
-      }
-    },
-    {
-      "name": "separation", "value": false,
-      "bind": {"input": "checkbox"}
-    }
-  ],
-
   "data": [
     {
       "name": "tree",
-      "values": [],
       "transform": [
-        {
-          "type": "stratify",
-          "key": "id",
-          "parentKey": "parent"
-        },
+        {"type": "stratify", "key": "id", "parentKey": "parent"},
         {
           "type": "tree",
-          "method": {"signal": "layout"},
+          "as": ["y", "x", "depth", "children"],
           "size": [{"signal": "height"}, {"signal": "width - 100"}],
-          "separation": {"signal": "separation"},
-          "as": ["y", "x", "depth", "children"]
+          "method": {"signal": "layout"},
+          "separation": {"signal": "separation"}
         }
-      ]
+      ],
+      "values": []
     },
     {
       "name": "links",
-      "source": "tree",
       "transform": [
-        { "type": "treelinks" },
+        {"type": "treelinks"},
         {
           "type": "linkpath",
           "orient": "horizontal",
           "shape": {"signal": "links"}
         }
-      ]
+      ],
+      "source": "tree"
     }
   ],
-
-  "scales": [
-    {
-      "name": "color",
-      "type": "linear",
-      "range": {"scheme": "magma"},
-      "domain": {"data": "tree", "field": "depth"},
-      "zero": true
-    }
-  ],
-
   "marks": [
     {
-      "type": "path",
       "from": {"data": "links"},
+      "type": "path",
       "encode": {
-        "update": {
-          "path": {"field": "path"},
-          "stroke": {"value": "#ccc"}
-        }
+        "update": {"path": {"field": "path"}, "stroke": {"value": "#ccc"}}
       }
     },
     {
-      "type": "symbol",
       "from": {"data": "tree"},
+      "type": "symbol",
       "encode": {
-        "enter": {
-          "size": {"value": 100},
-          "stroke": {"value": "#fff"}
-        },
+        "enter": {"size": {"value": 100}, "stroke": {"value": "#fff"}},
         "update": {
+          "fill": {"scale": "color", "field": "depth"},
           "x": {"field": "x"},
-          "y": {"field": "y"},
-          "fill": {"scale": "color", "field": "depth"}
+          "y": {"field": "y"}
         }
       }
     },
     {
-      "type": "text",
       "from": {"data": "tree"},
+      "type": "text",
       "encode": {
         "enter": {
-          "text": {"field": "name"},
+          "baseline": {"value": "middle"},
           "fontSize": {"value": 9},
-          "baseline": {"value": "middle"}
+          "text": {"field": "name"}
         },
         "update": {
-          "x": {"field": "x"},
-          "y": {"field": "y"},
-          "dx": {"signal": "datum.children ? -7 : 7"},
           "align": {"signal": "datum.children ? 'right' : 'left'"},
-          "opacity": {"signal": "labels ? 1 : 0"}
+          "dx": {"signal": "datum.children ? -7 : 7"},
+          "opacity": {"signal": "labels ? 1 : 0"},
+          "x": {"field": "x"},
+          "y": {"field": "y"}
         }
       }
     }
-  ]
+  ],
+  "scales": [
+    {
+      "domain": {"data": "tree", "field": "depth"},
+      "name": "color",
+      "type": "linear",
+      "range": {"scheme": "magma"},
+      "zero": true
+    }
+  ],
+  "signals": [
+    {"name": "wSignal", "bind": {"input": "text"}, "value": 1000},
+    {"name": "hSignal", "bind": {"input": "text"}, "value": 1000},
+    {"name": "labels", "bind": {"input": "checkbox"}, "value": true},
+    {
+      "name": "layout",
+      "bind": {"input": "radio", "options": ["tidy", "cluster"]},
+      "value": "tidy"
+    },
+    {
+      "name": "links",
+      "bind": {
+        "input": "select",
+        "options": ["line", "curve", "diagonal", "orthogonal"]
+      },
+      "value": "diagonal"
+    },
+    {"name": "separation", "bind": {"input": "checkbox"}, "value": false}
+  ],
+  "$schema": "https://vega.github.io/schema/vega/v5.json",
+  "description": "An example of Cartesian layouts for a node-link diagram of hierarchical data.",
+  "height": {
+    "signal": "hSignal"
+  },
+  "padding": 5,
+  "width": {
+    "signal": "wSignal"
+  }
 }