treeFilter option (#1611)

Author: mbostock

docs/transforms/tree.md

@@ -88,6 +88,7 @@ The treeNode transform will derive output columns for any *options* that have on
 * *node:name* - the node’s name (the last part of its path)
 * *node:path* - the node’s full, normalized, slash-separated path
 * *node:internal* - true if the node is internal, or false for leaves
+* *node:external* - true if the node is a leaf, or false for internal nodes
 * *node:depth* - the distance from the node to the root
 * *node:height* - the distance from the node to its deepest descendant
 
@@ -102,6 +103,7 @@ The treeLink transform will likewise derive output columns for any *options* tha
 * *node:name* - the child node’s name (the last part of its path)
 * *node:path* - the child node’s full, normalized, slash-separated path
 * *node:internal* - true if the child node is internal, or false for leaves
+* *node:external* - true if the child node is a leaf, or false for internal nodes
 * *node:depth* - the distance from the child node to the root
 * *node:height* - the distance from the child node to its deepest descendant
 * *parent:name* - the parent node’s name (the last part of its path)

src/marks/tree.d.ts

@@ -4,7 +4,7 @@ import type {DotOptions} from "./dot.js";
 import type {LinkOptions} from "./link.js";
 import type {TextOptions} from "./text.js";
 
-// TODO tree channels, e.g., "node:name" | "node:path" | "node:internal"?
+// TODO tree channels, e.g., "node:name" | "node:path" | "node:internal" | "node:external"?
 
 /** Options for the compound tree mark. */
 export interface TreeOptions extends DotOptions, LinkOptions, TextOptions, TreeTransformOptions {

src/marks/tree.js

@@ -1,8 +1,7 @@
-import {cluster as Cluster} from "d3";
-import {isNoneish} from "../options.js";
+import {tree as Tree, cluster as Cluster} from "d3";
 import {marks} from "../mark.js";
+import {isNoneish} from "../options.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";
@@ -32,8 +31,26 @@ export function tree(
     ...options
   } = {}
 ) {
+  const {treeLayout = Tree} = options;
   if (dx === undefined) dx = maybeTreeAnchor(options.treeAnchor).dx;
   if (textAnchor !== undefined) throw new Error("textAnchor is not a configurable tree option");
+
+  function treeText(textOptions) {
+    return text(
+      data,
+      treeNode({
+        text: textText,
+        fill: fill === undefined ? "currentColor" : fill,
+        stroke: textStroke,
+        dx,
+        dy,
+        title,
+        ...textOptions,
+        ...options
+      })
+    );
+  }
+
   return marks(
     link(
       data,
@@ -53,40 +70,12 @@ export function tree(
     ),
     dotDot ? dot(data, treeNode({fill: fill === undefined ? "node:internal" : fill, title, ...options})) : null,
     textText != null
-      ? [
-          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
-              })
-            )
-          )
-        ]
+      ? treeLayout === Tree || treeLayout === Cluster
+        ? [
+            treeText({textAnchor: "start", treeFilter: "node:external"}),
+            treeText({textAnchor: "end", treeFilter: "node:internal", dx: -dx})
+          ]
+        : treeText()
       : null
   );
 }

src/transforms/tree.d.ts

@@ -75,6 +75,7 @@ export interface TreeTransformOptions {
  * * *node:name* - the node’s name (the last part of its path)
  * * *node:path* - the node’s full, normalized, slash-separated path
  * * *node:internal* - true if the node is internal, or false for leaves
+ * * *node:external* - true if the node is a leaf, or false for internal nodes
  * * *node:depth* - the distance from the node to the root
  * * *node:height* - the distance from the node to its deepest descendant
  *
@@ -97,6 +98,7 @@ export function treeNode<T>(options?: T & TreeTransformOptions): Transformed<T>;
  * * *node:name* - the child node’s name (the last part of its path)
  * * *node:path* - the child node’s full, normalized, slash-separated path
  * * *node:internal* - true if the child node is internal, or false for leaves
+ * * *node:external* - true if the child node is a leaf, or false for external nodes
  * * *node:depth* - the distance from the child node to the root
  * * *node:height* - the distance from the child node to its deepest descendant
  * * *parent:name* - the parent node’s name (the last part of its path)

src/transforms/tree.js

@@ -11,10 +11,12 @@ export function treeNode({
   treeSort,
   treeSeparation,
   treeAnchor,
+  treeFilter,
   ...options
 } = {}) {
   treeAnchor = maybeTreeAnchor(treeAnchor);
   treeSort = maybeTreeSort(treeSort);
+  if (treeFilter != null) treeFilter = maybeNodeValue(treeFilter);
   if (frameAnchor === undefined) frameAnchor = treeAnchor.frameAnchor;
   const normalize = normalizer(delimiter);
   const outputs = treeOutputs(options, maybeNodeValue);
@@ -42,15 +44,9 @@ export function treeNode({
         if (treeSort != null) root.sort(treeSort);
         layout(root);
         for (const node of root.descendants()) {
+          if (treeFilter != null && !treeFilter(node)) continue;
           treeFacet.push(++treeIndex);
-          treeData[treeIndex] = {
-            data: node.data,
-            name: nodeName(node),
-            path: nodePath(node),
-            internal: nodeInternal(node),
-            depth: node.depth, // nodeDepth(node)
-            height: node.height // nodeHeight(node)
-          };
+          treeData[treeIndex] = node.data;
           treeAnchor.position(node, treeIndex, X, Y);
           for (const o of outputs) o[output_values][treeIndex] = o[output_evaluate](node);
         }
@@ -73,10 +69,12 @@ export function treeLink({
   treeSort,
   treeSeparation,
   treeAnchor,
+  treeFilter,
   ...options
 } = {}) {
   treeAnchor = maybeTreeAnchor(treeAnchor);
   treeSort = maybeTreeSort(treeSort);
+  if (treeFilter != null) treeFilter = maybeLinkValue(treeFilter);
   options = {curve, stroke, strokeWidth, strokeOpacity, ...options};
   const normalize = normalizer(delimiter);
   const outputs = treeOutputs(options, maybeLinkValue);
@@ -109,6 +107,7 @@ export function treeLink({
         if (treeSort != null) root.sort(treeSort);
         layout(root);
         for (const {source, target} of root.links()) {
+          if (treeFilter != null && !treeFilter(target, source)) continue;
           treeFacet.push(++treeIndex);
           treeData[treeIndex] = target.data;
           treeAnchor.position(source, treeIndex, X1, Y1);
@@ -201,6 +200,8 @@ function maybeNodeValue(value) {
       return nodePath;
     case "node:internal":
       return nodeInternal;
+    case "node:external":
+      return nodeExternal;
     case "node:depth":
       return nodeDepth;
     case "node:height":
@@ -229,6 +230,8 @@ function maybeLinkValue(value) {
       return nodePath;
     case "node:internal":
       return nodeInternal;
+    case "node:external":
+      return nodeExternal;
     case "node:depth":
       return nodeDepth;
     case "node:height":
@@ -257,6 +260,10 @@ function nodeInternal(node) {
   return !!node.children;
 }
 
+function nodeExternal(node) {
+  return !node.children;
+}
+
 function parentValue(evaluate) {
   return (child, parent) => (parent == null ? undefined : evaluate(parent));
 }