Skip to main content

Function: highlight()

highlight(root, ids): string[]

Defined in: packages/sdvplot/src/interact/highlight.ts:118

Emphasise the marks under root stamped (data-sdv-id) with one of ids and dim the rest; null clears and an empty set dims everything. A class toggle, never a redraw: each call touches only the marks whose state changed, plus the root's class, and one CSS rule (--sdv-dim-opacity, default 0.2) does the dimming. Marks Plot draws later (a Plot.pointer layer) are indexed as they appear; axis logos (data-sdv-axis) are decorations and never dim. Returns the ids that match no mark here (an id absent from this figure is not an error). No-op without a DOM.

Parameters​

root​

Element

ids​

ReadonlySet<string> | null

Returns​

string[]

Example​

import * as Plot from "@observablehq/plot";
import { highlight } from "@sportsdataverse/sdvplot/interact";
import { linkIds } from "@sportsdataverse/sdvplot/plot";

const rows = [
  { team: "KC", wins: 15, pf: 385 },
  { team: "BUF", wins: 13, pf: 525 },
  { team: "MIA", wins: 8, pf: 345 },
];
const svg = Plot.plot({ marks: [Plot.dot(rows, { x: "wins", y: "pf", r: 6, render: linkIds(rows, "team") })] });
const missing = highlight(svg, new Set(["KC", "SEA"])); // ["SEA"]: no SEA dot here; BUF and MIA dim
svg;