closes #1723 (#1726)

I pondered a bit what happened if dotDot was false: we could then add the tip option on the text mark, but this would in turn create more complexity. Decided to keep it simple.
observablehq · Jun 26, 2023 · 7f67431 · 7f67431
1 parent f77ac3a
commit 7f67431
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 1 deletion.
diff --git a/src/marks/tree.js b/src/marks/tree.js
@@ -31,6 +31,7 @@ export function tree(
     textAnchor,
     treeLayout = Tree,
     textLayout = treeLayout === Tree || treeLayout === Cluster ? "mirrored" : "normal",
+    tip,
     ...options
   } = {}
 ) {
@@ -74,7 +75,7 @@ export function tree(
       })
     ),
     dotDot
-      ? dot(data, treeNode({treeLayout, fill: fill === undefined ? "node:internal" : fill, title, ...options}))
+      ? dot(data, treeNode({treeLayout, fill: fill === undefined ? "node:internal" : fill, title, tip, ...options}))
       : null,
     textText != null
       ? textLayout === "mirrored"

diff --git a/test/output/greekGodsTip.svg b/test/output/greekGodsTip.svg
diff --git a/test/plots/greek-gods.ts b/test/plots/greek-gods.ts
@@ -19,6 +19,25 @@ Chaos Tartarus`
   });
 }
 
+export async function greekGodsTip() {
+  const gods = `Chaos Gaia Mountains
+Chaos Gaia Pontus
+Chaos Gaia Uranus
+Chaos Eros
+Chaos Erebus
+Chaos Tartarus`
+    .split("\n")
+    .map((d) => d.replace(/\s+/g, "/"));
+  return Plot.plot({
+    axis: null,
+    insetLeft: 35,
+    insetTop: 20,
+    insetBottom: 20,
+    insetRight: 120,
+    marks: [Plot.tree(gods, {tip: true})]
+  });
+}
+
 export async function greekGodsExplicit() {
   const gods = `Chaos Gaia Mountains
 Chaos Gaia Pontus