Selector generation for the Observable Plot adapter.
MAIDR highlights a data point by resolving the layer's CSS selector against
the document and taking the element at the point's index, so a selector has
to match exactly the elements the layer's data describes, in the same order.
Plot gives an adapter no class or id to aim at: a mark's elements are bare
<rect>s inside <g aria-label="bar">, and a plot with two bar marks has
two such groups. Positional selectors (:nth-of-type) would express that,
but they break the moment Plot nests the elements one level deeper for a
facet — which it does, without changing anything else. So the adapter stamps
each element with the layer it belongs to and selects on that instead: the
mapping is then explicit, order is document order, and nothing depends on
where in the tree Plot put the element.
Selector generation for the Observable Plot adapter.
MAIDR highlights a data point by resolving the layer's CSS selector against the document and taking the element at the point's index, so a selector has to match exactly the elements the layer's data describes, in the same order.
Plot gives an adapter no class or id to aim at: a mark's elements are bare
<rect>s inside<g aria-label="bar">, and a plot with two bar marks has two such groups. Positional selectors (:nth-of-type) would express that, but they break the moment Plot nests the elements one level deeper for a facet — which it does, without changing anything else. So the adapter stamps each element with the layer it belongs to and selects on that instead: the mapping is then explicit, order is document order, and nothing depends on where in the tree Plot put the element.