Pointer should ignore clicks on other marks

Consider the following example where a bar mark is used to highlight and pick selections, with a dot mark on top that has external links.

Clicking on any of the dots (either left click to open the link directly, or right click to open the context menu) will also pin the pointer selection.

Plot.plot({
  marks: [
    Plot.barY("abcd", Plot.pointerX({x: d => d, fill: "#eee", maxRadius: Infinity})),
    Plot.dotX("abcd", {r: 30, fill: d => d, href: d => `https://google.com/?q=${d}`})
  ],
})

As an aside, the pointerdown handler should perhaps only respond to "pure" left clicks (button=0 and no modifier keys pressed).

related: #1832

... I guess this request is largely incompatible with how Pointer is currently implemented, given that it is point/proximity based and has no notion of event targets?

Workaround to exclude a single mark:

Plot.plot({
  marks: [
    Plot.barY("abcd", Plot.pointerX({x: d => d, fill: "#eee", maxRadius: Infinity})),
    Plot.dotX("abcd", {r: 30, fill: d => d, href: d => `https://google.com/?q=${d}`, render(...args) {
      const ret = args.pop().apply(this, args);
      ret.addEventListener("pointerdown", e => e.stopPropagation());
      return ret;
    }})
  ],
})

Alternative workaround that's a bit more flexible: https://observablehq.com/@mootari/plot-group

The pointer transform is based on the closest point to the pointer, not the shape of the rendered mark.

Navigation Menu

Repository navigation

Pointer should ignore clicks on other marks #2298

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Pointer should ignore clicks on other marks #2298

Description

Activity

Fil commented on Mar 14, 2025

mootari commented on Mar 14, 2025

mootari commented on Mar 14, 2025

mbostock commented on Apr 6, 2026

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions