composable render transforms (#1576)

Author: mbostock

src/interactions/pointer.js

@@ -16,8 +16,7 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} =
     y,
     channels,
     ...options,
-    render(index, scales, values, dimensions, context) {
-      const mark = this;
+    render(index, scales, values, dimensions, context, next) {
       const svg = context.ownerSVGElement;
 
       // Isolate state per-pointer, per-plot; if the pointer is reused by
@@ -50,8 +49,8 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} =
       if (faceted) {
         let facetStates = state.facetStates;
         if (!facetStates) state.facetStates = facetStates = new Map();
-        facetState = facetStates.get(mark);
-        if (!facetState) facetStates.set(mark, (facetState = new Map()));
+        facetState = facetStates.get(this);
+        if (!facetState) facetStates.set(this, (facetState = new Map()));
       }
 
       // The order of precedence for the pointer position is: px & py; the
@@ -97,7 +96,7 @@ function pointerK(kx, ky, {x, y, px, py, maxRadius = 40, channels, ...options} =
         i = ii;
         const I = i == null ? [] : [i];
         if (faceted) (I.fx = index.fx), (I.fy = index.fy), (I.fi = index.fi);
-        const r = mark.render(I, scales, values, dimensions, context);
+        const r = next(I, scales, values, dimensions, context);
         if (g) {
           // When faceting, preserve swapped mark and facet transforms; also
           // remove ARIA attributes since these are promoted to the parent. This

src/mark.d.ts

@@ -47,7 +47,9 @@ export type RenderFunction = (
   /** The plot’s dimensions. */
   dimensions: Dimensions,
   /** The plot’s context. */
-  context: Context
+  context: Context,
+  /** The next render function; for render transforms only. */
+  next?: RenderFunction
 ) => SVGElement | null;
 
 /**

src/mark.js

@@ -84,7 +84,7 @@ export class Mark {
     }
     if (render != null) {
       if (typeof render !== "function") throw new TypeError(`invalid render transform: ${render}`);
-      this.renderTransform = render;
+      this.render = composeRender(render, this.render);
     }
   }
   initialize(facets, facetChannels, plotOptions) {
@@ -136,6 +136,12 @@ export function marks(...marks) {
   return marks;
 }
 
+function composeRender(r1, r2) {
+  return function () {
+    return r1.call(this, ...arguments, r2.bind(this));
+  };
+}
+
 function maybeChannels(channels) {
   return Object.fromEntries(
     Object.entries(maybeNamed(channels)).map(([name, channel]) => {

src/plot.js

@@ -274,7 +274,7 @@ export function plot(options = {}) {
         index = mark.filter(index, channels, values);
         if (index.length === 0) continue;
       }
-      const node = render(mark, index, scales, values, superdimensions, context);
+      const node = mark.render(index, scales, values, superdimensions, context);
       if (node == null) continue;
       svg.appendChild(node);
     }
@@ -292,7 +292,7 @@ export function plot(options = {}) {
           if (index.length === 0) continue;
           if (faceted) (index.fx = f.x), (index.fy = f.y), (index.fi = f.i);
         }
-        const node = render(mark, index, scales, values, subdimensions, context);
+        const node = mark.render(index, scales, values, subdimensions, context);
         if (node == null) continue;
         // Lazily construct the shared group (to drop empty marks).
         (g ??= select(svg).append("g")).append(() => node).datum(f);
@@ -372,10 +372,6 @@ class Render extends Mark {
   render() {}
 }
 
-function render(mark, ...args) {
-  return (mark.renderTransform ?? mark.render).apply(mark, args);
-}
-
 // Note: mutates channel.value to apply the scale transform, if any.
 function applyScaleTransforms(channels, options) {
   for (const name in channels) applyScaleTransform(channels[name], options);