pointer improvements

Author: mbostock

src/marks/pointer.js

@@ -1,8 +1,8 @@
 import {create, namespaces, pointer as pointerof, quickselect, union} from "d3";
-import {identity, maybeFrameAnchor, maybeTuple} from "../options.js";
+import {identity, maybeTuple} from "../options.js";
 import {Mark} from "../plot.js";
 import {selection} from "../selection.js";
-import {applyDirectStyles, applyFrameAnchor, applyIndirectStyles} from "../style.js";
+import {applyDirectStyles, applyIndirectStyles} from "../style.js";
 
 const defaults = {
   ariaLabel: "pointer",
@@ -15,10 +15,9 @@ export class Pointer extends Mark {
   constructor(data, {
     x,
     y,
-    n = Infinity,
+    n = 1,
     r = isFinite(n) ? 120 : 20,
     mode = "auto",
-    frameAnchor,
     ...options
   } = {}) {
     super(
@@ -33,12 +32,10 @@ export class Pointer extends Mark {
     this.n = +n;
     this.r = +r;
     this.mode = maybeMode(mode, x, y);
-    this.frameAnchor = maybeFrameAnchor(frameAnchor);
   }
-  render(index, scales, {x: X, y: Y}, dimensions) {
+  render(index, {x, y}, {x: X, y: Y}, dimensions) {
     const {marginLeft, width, marginRight, marginTop, height, marginBottom} = dimensions;
     const {mode, n, r} = this;
-    const [cx, cy] = applyFrameAnchor(this, dimensions);
     const r2 = r * r; // the squared radius; to determine points in proximity to the pointer
     const down = new Set(); // the set of pointers that are currently down
     let C = []; // a sparse index from index[i] to an svg:circle element
@@ -63,11 +60,14 @@ export class Pointer extends Mark {
       S.forEach(i => {
         let c = C[i];
         if (!c) {
-          c = document.createElementNS(namespaces.svg, "circle");
-          c.setAttribute("id", i);
-          c.setAttribute("r", 4);
-          c.setAttribute("cx", X ? X[i] : cx);
-          c.setAttribute("cy", Y ? Y[i] : cy);
+          c = X && Y ? (x.bandwidth && y.bandwidth ? element("rect", {x: X[i], y: Y[i], width: x.bandwidth(), height: y.bandwidth()})
+              : x.bandwidth ? element("line", {x1: X[i], x2: X[i] + x.bandwidth(), y1: Y[i], y2: Y[i]})
+              : y.bandwidth ? element("line", {x1: X[i], x2: X[i], y1: Y[i], y2: Y[i] + y.bandwidth()})
+              : element("circle", {cx: X[i], cy: Y[i], r: 4}))
+            : X ? (x.bandwidth ? element("rect", {x: X[i], y: marginTop, width: x.bandwidth(), height: height - marginBottom - marginTop})
+              : element("line", {x1: X[i], x2: X[i], y1: marginTop, y2: height - marginBottom}))
+            : (y.bandwidth ? element("rect", {x: marginLeft, y: Y[i], width: width - marginRight - marginLeft, height: y.bandwidth()})
+              : element("line", {y1: Y[i], y2: Y[i], x1: marginLeft, x2: width - marginRight}));
           parent.appendChild(c);
           changed = true;
         }
@@ -119,11 +119,16 @@ export class Pointer extends Mark {
           // If any pointer is down, only consider pointers that are down.
           if (P && !down.has(event.pointerId)) return;
 
+          // Adjust the pointer to account for band scales; for band scales, the
+          // data is mapped to the start of the band (e.g., a bar’s left edge).
+          let [mx, my] = pointerof(event);
+          if (x.bandwidth) mx -= x.bandwidth() / 2;
+          if (y.bandwidth) my -= y.bandwidth() / 2;
+
           // Compute the current selection, S: the subset of index that is
           // logically selected. Normally this should be an in-order subset of
           // index, but it isn’t here because quickselect will reorder in-place
           // if the n option is used!
-          const [mx, my] = pointerof(event);
           let S = index;
           switch (mode) {
             case "xy": {
@@ -185,7 +190,7 @@ export class Pointer extends Mark {
         .on("pointerup", event => {
           // On pointerup, if the selection is empty, clear the persistent to
           // selection to allow the ephemeral selection on subsequent hover.
-          if (!P.length) select(P = null);
+          if (P && !P.length) select(P = null);
           down.delete(event.pointerId);
         })
         .on("pointerout", () => {
@@ -211,6 +216,12 @@ function maybeMode(mode = "auto", x, y) {
   return mode;
 }
 
+function element(name, attrs) {
+  const e = document.createElementNS(namespaces.svg, name);
+  for (const key in attrs) e.setAttribute(key, attrs[key]);
+  return e;
+}
+
 export function pointer(data, {x, y, ...options} = {}) {
   ([x, y] = maybeTuple(x, y));
   return new Pointer(data, {...options, x, y});