tooltip

Author: mbostock

src/context.d.ts

@@ -8,6 +8,9 @@ export interface Context {
    */
   document: Document;
 
+  /** The current owner SVG element. */
+  ownerSVGElement: SVGSVGElement;
+
   /** The current projection, if any. */
   projection?: GeoStreamWrapper;
 }

src/context.js

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

src/index.d.ts

@@ -31,6 +31,7 @@ export * from "./marks/rect.js";
 export * from "./marks/rule.js";
 export * from "./marks/text.js";
 export * from "./marks/tick.js";
+export * from "./marks/tooltip.js";
 export * from "./marks/tree.js";
 export * from "./marks/vector.js";
 export * from "./options.js";

src/index.js

@@ -24,6 +24,7 @@ export {Rect, rect, rectX, rectY} from "./marks/rect.js";
 export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
+export {Tooltip, tooltip} from "./marks/tooltip.js";
 export {tree, cluster} from "./marks/tree.js";
 export {Vector, vector, vectorX, vectorY, spike} from "./marks/vector.js";
 export {valueof, column, identity} from "./options.js";

src/marks/dot.js

@@ -69,7 +69,7 @@ export class Dot extends Mark {
     const {x: X, y: Y, r: R, rotate: A, symbol: S} = channels;
     const {r, rotate, symbol} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
-    const circle = this.symbol === symbolCircle;
+    const circle = symbol === symbolCircle;
     const size = R ? undefined : r * r * Math.PI;
     if (negative(r)) index = [];
     return create("svg:g", context)

src/marks/tooltip.d.ts

@@ -0,0 +1,44 @@
+import type {ChannelValueSpec} from "../channel.js";
+import type {Data, FrameAnchor, MarkOptions, RenderableMark} from "../mark.js";
+
+/** Options for the tooltip mark. */
+export interface TooltipOptions extends MarkOptions {
+  /**
+   * The horizontal position channel specifying the tooltip’s anchor, typically
+   * bound to the *x* scale.
+   */
+  x?: ChannelValueSpec;
+
+  /**
+   * The vertical position channel specifying the tooltip’s anchor, typically
+   * bound to the *y* scale.
+   */
+  y?: ChannelValueSpec;
+
+  /**
+   * The frame anchor specifies defaults for **x** and **y** based on the plot’s
+   * frame; it may be one of the four sides (*top*, *right*, *bottom*, *left*),
+   * one of the four corners (*top-left*, *top-right*, *bottom-right*,
+   * *bottom-left*), or the *middle* of the frame. For example, for tooltips
+   * distributed horizontally at the top of the frame:
+   *
+   * ```js
+   * Plot.tooltip(data, {x: "date", frameAnchor: "top"})
+   * ```
+   */
+  frameAnchor?: FrameAnchor;
+}
+
+/**
+ * Returns a new tooltip mark for the given *data* and *options*.
+ *
+ * If either **x** or **y** is not specified, the default is determined by the
+ * **frameAnchor** option. If none of **x**, **y**, and **frameAnchor** are
+ * specified, *data* is assumed to be an array of pairs [[*x₀*, *y₀*], [*x₁*,
+ * *y₁*], [*x₂*, *y₂*], …] such that **x** = [*x₀*, *x₁*, *x₂*, …] and **y** =
+ * [*y₀*, *y₁*, *y₂*, …].
+ */
+export function tooltip(data?: Data, options?: TooltipOptions): Tooltip;
+
+/** The tooltip mark. */
+export class Tooltip extends RenderableMark {}

src/marks/tooltip.js

@@ -0,0 +1,99 @@
+import {pointer, select} from "d3";
+import {Mark} from "../mark.js";
+import {maybeFrameAnchor, maybeTuple} from "../options.js";
+import {applyFrameAnchor} from "../style.js";
+
+export class Tooltip extends Mark {
+  constructor(data, options = {}) {
+    const {x, y, maxRadius = 40, frameAnchor} = options;
+    super(
+      data,
+      {
+        x: {value: x, scale: "x", optional: true},
+        y: {value: y, scale: "y", optional: true}
+      },
+      options
+    );
+    this.frameAnchor = maybeFrameAnchor(frameAnchor);
+    this.indexesBySvg = new WeakMap();
+    this.maxRadius = +maxRadius;
+  }
+  render(index, {x, y, fx, fy}, {x: X, y: Y, channels}, dimensions, context) {
+    // TODO
+    // - ✅ Get local coordinates of the pointer
+    // - ✅ Register one pointermove listener per plot
+    // - ✅ Find the closest point in screen (scaled) coordinates
+    // - ✅ Find the closest point across all facets
+    // - ✅ Limit the search radius
+    // - ✅ Suppress the tooltip on pointerdown
+    // - ✅ Display unscaled values in a tooltip
+    // - ✅ Handle x or y not existing; respect frameAnchor
+    // - ✅ Handle fx or fy not existing (for the entire plot)
+    // - Handle faceting being disabled for this mark (facet: null)
+    // - Tooltips for rect, with configurable anchor point
+    // - Tooltips for line, searching first on x and then on y, and vice versa
+    // - Tooltips for area… matching between topline and baseline?
+    // - Tooltips for link and arrow, treating {x1, y1} and {x2, y2} as distinct points
+    // - Tooltips for vector, but matching the end of the vector instead of the start?
+    // - Tooltips for tick and rule?
+    // - Tooltips for bar and cell?
+    // - Tooltips for geo and contour?
+    // - [nice to have] Handle multiple dots in the same position (e.g., click to cycle)?
+    // - Remove the red dot for testing purposes
+    const [cx, cy] = applyFrameAnchor(this, dimensions);
+    const {maxRadius} = this;
+    const {marginLeft, marginTop} = dimensions;
+    const svg = context.ownerSVGElement;
+    let indexes = this.indexesBySvg.get(svg);
+    if (indexes) return void indexes.push(index);
+    this.indexesBySvg.set(svg, (indexes = [index]));
+    const dot = select(svg)
+      .on("pointermove", (event) => {
+        let i, xi, yi, fxi, fyi;
+        if (event.buttons === 0) {
+          const [xp, yp] = pointer(event);
+          let ri = maxRadius * maxRadius;
+          for (const index of indexes) {
+            const fxj = index.fx;
+            const fyj = index.fy;
+            const oxj = fx ? fx(fxj) - marginLeft : 0;
+            const oyj = fy ? fy(fyj) - marginTop : 0;
+            for (const j of index) {
+              const xj = (X ? X[j] : cx) + oxj;
+              const yj = (Y ? Y[j] : cy) + oyj;
+              const dx = xj - xp;
+              const dy = yj - yp;
+              const rj = dx * dx + dy * dy;
+              if (rj <= ri) (i = j), (ri = rj), (xi = xj), (yi = yj), (fxi = fxj), (fyi = fyj);
+            }
+          }
+        }
+        if (i === undefined) {
+          dot.attr("display", "none");
+        } else {
+          dot.attr("display", "inline");
+          dot.attr("transform", `translate(${xi},${yi})`);
+          const text = [];
+          if (x) text.push(`${x.label ?? "x"} = ${channels.x.value[i]}`);
+          if (y) text.push(`${y.label ?? "y"} = ${channels.y.value[i]}`);
+          if (fx) text.push(`${fx.label ?? "fx"} = ${fxi}`);
+          if (fy) text.push(`${fy.label ?? "fy"} = ${fyi}`);
+          title.text(text.join("\n"));
+        }
+      })
+      .on("pointerdown pointerleave", () => dot.attr("display", "none"))
+      .append("g")
+      .attr("display", "none")
+      .attr("pointer-events", "all")
+      .attr("fill", "none")
+      .call((g) => g.append("circle").attr("r", maxRadius).attr("fill", "none"))
+      .call((g) => g.append("circle").attr("r", 4.5).attr("stroke", "red").attr("stroke-width", 1.5));
+    const title = dot.append("title");
+    return null;
+  }
+}
+
+export function tooltip(data, {x, y, ...options} = {}) {
+  if (options.frameAnchor === undefined) [x, y] = maybeTuple(x, y);
+  return new Tooltip(data, {...options, x, y});
+}

src/plot.js

@@ -204,7 +204,7 @@ export function plot(options = {}) {
 
   const {width, height} = dimensions;
 
-  const svg = create("svg", context)
+  const svg = select(context.ownerSVGElement)
     .attr("class", className)
     .attr("fill", "currentColor")
     .attr("font-family", "system-ui, sans-serif")
@@ -260,7 +260,9 @@ export function plot(options = {}) {
             index = indexes[facetStateByMark.has(mark) ? f.i : 0];
             index = mark.filter(index, channels, values);
             if (index.length === 0) continue;
-            index.fi = f.i; // TODO cleaner way of exposing the current facet index?
+            index.fx = f.x;
+            index.fy = f.y;
+            index.fi = f.i;
           }
           const node = mark.render(index, scales, values, subdimensions, context);
           if (node == null) continue;