render transform!

Author: mbostock

src/mark.d.ts

@@ -126,6 +126,9 @@ export interface MarkOptions {
   /** A custom mark initializer. */
   initializer?: InitializerFunction;
 
+  /** A custom render transform. */
+  render?: RenderFunction;
+
   /**
    * The horizontal facet position channel, for mark-level faceting, bound to
    * the *fx* scale.

src/mark.js

@@ -22,7 +22,8 @@ export class Mark {
       marginBottom = margin,
       marginLeft = margin,
       clip,
-      channels: extraChannels
+      channels: extraChannels,
+      render
     } = options;
     this.data = data;
     this.sort = isDomainSort(sort) ? sort : null;
@@ -78,6 +79,11 @@ export class Mark {
         throw new Error(`super-faceting cannot use x or y`);
       }
     }
+    if (render != null) {
+      if (typeof render !== "function") throw new TypeError(`invalid render transform: ${render}`);
+      this._render = this.render;
+      this.render = render;
+    }
   }
   initialize(facets, facetChannels, plotOptions) {
     let data = arrayify(this.data);

src/marks/tip.js

@@ -129,35 +129,36 @@ export class Tip extends Mark {
           )
       );
 
+    function postrender() {
+      const {width, height} = context.ownerSVGElement.getBBox();
+      g.selectChildren().each(function (i) {
+        const x = X ? X[i] : cx;
+        const y = Y ? Y[i] : cy;
+        const {width: w, height: h} = this.getBBox();
+        let c;
+        if (anchor === undefined) {
+          const fitLeft = x + w + r * 2 < width;
+          const fitRight = x - w - r * 2 > 0;
+          const fitTop = y + h + m + r * 2 + 7 < height;
+          const fitBottom = y - h - m - r * 2 > 0;
+          const cx = (/-left$/.test(c) ? fitLeft || !fitRight : fitLeft && !fitRight) ? "left" : "right";
+          const cy = (/^top-/.test(c) ? fitTop || !fitBottom : fitTop && !fitBottom) ? "top" : "bottom";
+          c = `${cy}-${cx}`;
+        }
+        const path = this.firstChild;
+        const text = this.lastChild;
+        path.setAttribute("d", getPath(c, m, r, w, h));
+        text.setAttribute("y", `${+getLineOffset(c, text.childNodes.length, lineHeight).toFixed(6)}em`);
+        text.setAttribute("transform", getTextTransform(c, m, r, w, h));
+      });
+    }
+
     // Wait until the Plot is inserted into the page, so that we can use getBBox
     // to compute the text dimensions. Perhaps this could be done synchronously;
     // getting the dimensions of the SVG is easy, and although accurate text
     // metrics are hard, we could use approximate heuristics.
-    if (typeof requestAnimationFrame !== "undefined") {
-      requestAnimationFrame(() => {
-        const {width, height} = g.node().ownerSVGElement.getBBox();
-        g.selectChildren().each(function (i) {
-          const x = X ? X[i] : cx;
-          const y = Y ? Y[i] : cy;
-          const {width: w, height: h} = this.getBBox();
-          let c;
-          if (anchor === undefined) {
-            const fitLeft = x + w + r * 2 < width;
-            const fitRight = x - w - r * 2 > 0;
-            const fitTop = y + h + m + r * 2 + 7 < height;
-            const fitBottom = y - h - m - r * 2 > 0;
-            const cx = (/-left$/.test(c) ? fitLeft || !fitRight : fitLeft && !fitRight) ? "left" : "right";
-            const cy = (/^top-/.test(c) ? fitTop || !fitBottom : fitTop && !fitBottom) ? "top" : "bottom";
-            c = `${cy}-${cx}`;
-          }
-          const path = this.firstChild;
-          const text = this.lastChild;
-          path.setAttribute("d", getPath(c, m, r, w, h));
-          text.setAttribute("y", `${+getLineOffset(c, text.childNodes.length, lineHeight).toFixed(6)}em`);
-          text.setAttribute("transform", getTextTransform(c, m, r, w, h));
-        });
-      });
-    }
+    if (context.ownerSVGElement.isConnected) Promise.resolve().then(postrender);
+    else if (typeof requestAnimationFrame !== "undefined") requestAnimationFrame(postrender);
 
     return g.node();
   }

src/plot.js

@@ -234,6 +234,9 @@ export function plot(options = {}) {
     .call(applyInlineStyles, style)
     .node();
 
+  // TODO Cleaner.
+  context.ownerSVGElement = svg;
+
   // Render facets.
   if (facets !== undefined) {
     const facetDomains = {x: fx?.domain(), y: fy?.domain()};

test/output/tipDot.svg

@@ -4,21 +4,27 @@ import * as d3 from "d3";
 export async function tipDot() {
   const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
   return Plot.plot({
-    style: "overflow: visible;",
     marks: [
-      Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"}),
-      Plot.tip(
-        penguins,
-        Plot.select(
-          (I) => [
-            d3.least(I, (i) => penguins[i].culmen_length_mm),
-            d3.greatest(I, (i) => penguins[i].culmen_length_mm),
-            d3.least(I, (i) => penguins[i].culmen_depth_mm),
-            d3.greatest(I, (i) => penguins[i].culmen_depth_mm)
-          ],
-          {x: "culmen_length_mm", y: "culmen_depth_mm"}
-        )
-      )
+      Plot.dot(penguins, {
+        x: "culmen_length_mm",
+        y: "culmen_depth_mm"
+      }),
+      Plot.tip(penguins, {
+        x: "culmen_length_mm",
+        y: "culmen_depth_mm",
+        render(index, ...args) {
+          const mark = this;
+          let i = 0;
+          index = d3.sort(index, (i) => penguins[i].culmen_length_mm);
+          let g = mark._render([index[i]], ...args);
+          setTimeout(function tick() {
+            if (!g.isConnected) return;
+            g.replaceWith((g = mark._render([index[(i = (i + 1) % index.length)]], ...args)));
+            setTimeout(tick, 100);
+          }, 100);
+          return g;
+        }
+      })
     ]
   });
 }