pointer interaction

Author: mbostock

src/context.d.ts

@@ -8,6 +8,9 @@ export interface Context {
    */
   document: Document;
 
+  /** The current owner SVG element. */
+  ownerSVGElement: SVGSVGElement;
+
   /** The Plot’s (typically generated) class name, for custom styles. */
   className: string;
 

src/context.js

@@ -3,7 +3,9 @@ import {createProjection} from "./projection.js";
 
 export function createContext(options = {}, dimensions, className) {
   const {document = typeof window !== "undefined" ? window.document : undefined} = options;
-  return {document, className, projection: createProjection(options, dimensions)};
+  const ownerSVGElement = creator("svg").call(document.documentElement);
+  const projection = createProjection(options, dimensions);
+  return {document, ownerSVGElement, className, projection};
 }
 
 export function create(name, {document}) {

src/index.d.ts

@@ -52,3 +52,4 @@ export * from "./transforms/select.js";
 export * from "./transforms/stack.js";
 export * from "./transforms/tree.js";
 export * from "./transforms/window.js";
+export * from "./interactions/pointer.js";

src/index.js

@@ -40,6 +40,7 @@ export {window, windowX, windowY} from "./transforms/window.js";
 export {select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY} from "./transforms/select.js";
 export {stackX, stackX1, stackX2, stackY, stackY1, stackY2} from "./transforms/stack.js";
 export {treeNode, treeLink} from "./transforms/tree.js";
+export {pointer} from "./interactions/pointer.js";
 export {formatIsoDate, formatWeekday, formatMonth} from "./format.js";
 export {scale} from "./scales.js";
 export {legend} from "./legends.js";

src/interactions/pointer.d.ts

@@ -0,0 +1,4 @@
+import type {Rendered} from "../transforms/basic.js";
+
+/** TODO */
+export function pointer<T>(options: T): Rendered<T>;

src/interactions/pointer.js

@@ -0,0 +1,75 @@
+import {pointer as pointof} from "d3";
+
+export function pointer(options) {
+  return {
+    ...options,
+    render(index, scales, values, dimensions, context) {
+      const mark = this;
+      const svg = context.ownerSVGElement;
+      const {x: X, y: Y, x1: X1, y1: Y1, x2: X2, y2: Y2} = values;
+      // let sticky = false; // TODO
+      const maxRadius = 40; // TODO option
+      const [cx, cy] = [0, 0]; // TODO applyFrameAnchor
+      const [kx, ky] = [1, 1]; // TODO axis option
+      let i; // currently focused index
+      let g; // currently rendered mark
+
+      function render(ii) {
+        if (i === ii) return; // abort if the tooltip hasn’t moved
+        i = ii;
+        const r = mark._render(i == null ? [] : [i], scales, values, dimensions, context);
+        if (g) g.replaceWith(r);
+        return (g = r);
+      }
+
+      function pointermove(event) {
+        // if (sticky || (event.pointerType === "mouse" && event.buttons === 1)) return; // dragging
+        const rect = svg.getBoundingClientRect();
+        let ii = null;
+        if (
+          // Check if the pointer is near before scanning.
+          event.clientX + maxRadius > rect.left &&
+          event.clientX - maxRadius < rect.right &&
+          event.clientY + maxRadius > rect.top &&
+          event.clientY - maxRadius < rect.bottom
+        ) {
+          const [xp, yp] = pointof(event, g.parentNode);
+          let ri = maxRadius * maxRadius;
+          for (const j of index) {
+            const xj = X2 ? (X1[j] + X2[j]) / 2 : X ? X[j] : cx; // + oxj;
+            const yj = Y2 ? (Y1[j] + Y2[j]) / 2 : Y ? Y[j] : cy; // + oyj;
+            const dx = kx * (xj - xp);
+            const dy = ky * (yj - yp);
+            const rj = dx * dx + dy * dy;
+            if (rj <= ri) (ii = j), (ri = rj);
+          }
+        }
+        render(ii);
+      }
+
+      // function pointerdown(event) {
+      //   if (event.pointerType !== "mouse") return;
+      //   if (sticky && tip.node().contains(event.target)) return; // stay sticky
+      //   if (sticky) (sticky = false), tip.attr("display", "none");
+      //   else if (i !== undefined) sticky = true;
+      // }
+
+      function pointerleave(event) {
+        if (event.pointerType !== "mouse") return;
+        // if (!sticky) tip.attr("display", "none");
+        render(null);
+      }
+
+      // We listen to the svg element; listening to the window instead would let
+      // us receive pointer events from farther away, but would also make it
+      // hard to know when to remove the listeners. (Using a mutation observer
+      // to watch the entire document is likely too expensive.)
+      svg.addEventListener("pointerenter", pointermove);
+      svg.addEventListener("pointermove", pointermove);
+      // svg.addEventListener("pointerdown", pointerdown);
+      svg.addEventListener("pointerleave", pointerleave);
+
+      return render(null);
+    }
+  };
+}

src/plot.js

@@ -142,6 +142,7 @@ export function plot(options = {}) {
   const subdimensions = fx || fy ? innerDimensions(scaleDescriptors, dimensions) : dimensions;
   const superdimensions = fx || fy ? actualDimensions(scales, dimensions) : dimensions;
   const context = createContext(options, subdimensions, className);
+  const svg = context.ownerSVGElement;
 
   // Reinitialize; for deriving channels dependent on other channels.
   const newByScale = new Set();
@@ -204,7 +205,7 @@ export function plot(options = {}) {
 
   const {width, height} = dimensions;
 
-  const svg = create("svg", context)
+  select(svg)
     .attr("class", className)
     .attr("fill", "currentColor")
     .attr("font-family", "system-ui, sans-serif")
@@ -231,11 +232,7 @@ export function plot(options = {}) {
 }`
       )
     )
-    .call(applyInlineStyles, style)
-    .node();
-
-  // TODO Cleaner.
-  context.ownerSVGElement = svg;
+    .call(applyInlineStyles, style);
 
   // Render facets.
   if (facets !== undefined) {

src/transforms/basic.d.ts

@@ -1,7 +1,8 @@
-import type {PlotOptions} from "../plot.js";
 import type {ChannelName, Channels, ChannelValue} from "../channel.js";
 import type {Context} from "../context.js";
 import type {Dimensions} from "../dimensions.js";
+import type {RenderFunction} from "../mark.js";
+import type {PlotOptions} from "../plot.js";
 import type {ScaleFunctions} from "../scales.js";
 
 /**
@@ -67,6 +68,9 @@ export type Transformed<T> = T & {transform: TransformFunction};
 /** Mark options with a mark initializer. */
 export type Initialized<T> = T & {initializer: InitializerFunction};
 
+/** Mark options with a mark render transform. */
+export type Rendered<T> = T & {render: RenderFunction};
+
 /**
  * Given an *options* object that may specify some basic transforms (**filter**,
  * **sort**, or **reverse**) or a custom **transform**, composes those

test/plots/tip.ts

@@ -5,26 +5,9 @@ export async function tipDot() {
   const penguins = await d3.csv<any>("data/penguins.csv", d3.autoType);
   return Plot.plot({
     marks: [
-      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;
-        }
-      })
+      Plot.dot(penguins, {x: "culmen_length_mm", y: "culmen_depth_mm"}),
+      Plot.dot(penguins, Plot.pointer({x: "culmen_length_mm", y: "culmen_depth_mm", r: 4, stroke: "red"})),
+      Plot.tip(penguins, Plot.pointer({x: "culmen_length_mm", y: "culmen_depth_mm"}))
     ]
   });
 }