balanced trees

closes #1589

Author: Fil

docs/marks/tree.md

@@ -41,7 +41,8 @@ For example, here is a little family tree of Greek gods.
 Plot.plot({
   axis: null,
   height: 100,
-  margin: 20,
+  margin: 10,
+  marginLeft: 35,
   marginRight: 120,
   marks: [
     Plot.tree(gods, {textStroke: "var(--vp-c-bg)"})
@@ -63,6 +64,7 @@ As a more complete example, here is a visualization of a software package hierar
 Plot.plot({
   axis: null,
   margin: 10,
+  marginLeft: 30,
   marginRight: 160,
   width: 688,
   height: 1800,
@@ -80,6 +82,7 @@ The **treeLayout** option specifies the layout algorithm. The tree mark uses the
 Plot.plot({
   axis: null,
   margin: 10,
+  marginLeft: 30,
   marginRight: 160,
   width: 688,
   height: 2400,

src/marks/tree.js

@@ -2,6 +2,7 @@ import {cluster as Cluster} from "d3";
 import {isNoneish} from "../options.js";
 import {marks} from "../mark.js";
 import {maybeTreeAnchor, treeLink, treeNode} from "../transforms/tree.js";
+import {filter} from "../transforms/basic.js";
 import {dot} from "./dot.js";
 import {link} from "./link.js";
 import {text} from "./text.js";
@@ -27,10 +28,12 @@ export function tree(
     title = "node:path",
     dx,
     dy,
+    textAnchor,
     ...options
   } = {}
 ) {
   if (dx === undefined) dx = maybeTreeAnchor(options.treeAnchor).dx;
+  if (textAnchor !== undefined) throw new Error("textAnchor is not a configurable tree option");
   return marks(
     link(
       data,
@@ -50,18 +53,40 @@ export function tree(
     ),
     dotDot ? dot(data, treeNode({fill: fill === undefined ? "node:internal" : fill, title, ...options})) : null,
     textText != null
-      ? text(
-          data,
-          treeNode({
-            text: textText,
-            fill: fill === undefined ? "currentColor" : fill,
-            stroke: textStroke,
-            dx,
-            dy,
-            title,
-            ...options
-          })
-        )
+      ? [
+          text(
+            data,
+            filter(
+              (d) => !d.internal,
+              treeNode({
+                text: textText,
+                fill: fill === undefined ? "currentColor" : fill,
+                stroke: textStroke,
+                dx,
+                dy,
+                title,
+                textAnchor: "start",
+                ...options
+              })
+            )
+          ),
+          text(
+            data,
+            filter(
+              "internal",
+              treeNode({
+                text: textText,
+                fill: fill === undefined ? "currentColor" : fill,
+                stroke: textStroke,
+                dx: -dx,
+                dy,
+                title,
+                textAnchor: "end",
+                ...options
+              })
+            )
+          )
+        ]
       : null
   );
 }

src/transforms/tree.js

@@ -43,7 +43,14 @@ export function treeNode({
         layout(root);
         for (const node of root.descendants()) {
           treeFacet.push(++treeIndex);
-          treeData[treeIndex] = node.data;
+          treeData[treeIndex] = {
+            data: node.data,
+            name: nodeName(node),
+            path: nodePath(node),
+            internal: nodeInternal(node),
+            depth: node.depth, // nodeDepth(node)
+            height: node.height // nodeHeight(node)
+          };
           treeAnchor.position(node, treeIndex, X, Y);
           for (const o of outputs) o[output_values][treeIndex] = o[output_evaluate](node);
         }

test/output/flareCluster.svg

@@ -6,6 +6,7 @@ export async function flareCluster() {
   return Plot.plot({
     axis: null,
     inset: 10,
+    insetLeft: 30,
     insetRight: 120,
     height: 2400,
     marks: Plot.cluster(flare, {path: "name", delimiter: "."})

test/output/flareIndent.svg

@@ -6,9 +6,10 @@ export async function flareIndent() {
   return Plot.plot({
     axis: null,
     inset: 10,
+    insetLeft: 70,
     insetRight: 120,
     round: true,
-    width: 200,
+    width: 300,
     height: 3600,
     marks: Plot.tree(flare, {
       strokeWidth: 1,

test/output/flareTree.svg

@@ -6,6 +6,7 @@ export async function flareTree() {
   return Plot.plot({
     axis: null,
     inset: 10,
+    insetLeft: 30,
     insetRight: 120,
     height: 1800,
     marks: Plot.tree(flare, {markerEnd: "arrow", path: "name", delimiter: "."})