Class SvgAbstract

The vertices of a path d attribute, in the path's own user units.

Shared by the line family, which places a marker on each vertex, and the scatter, which centres an inline marker on the box they span.

The outline a shape is drawn along, in its own user units: a path's vertices, a polyline's or a polygon's points, or those of the shape a <use> draws, moved by its offset -- matplotlib draws a filled band as a <use> of a path kept in its definitions.

Where an outline crosses the vertical line at x: a band's two bounds, a line's one point.

Where along an outline's x each of a series of points is drawn.

An outline drawn through every point has a vertex at each one's x, and those are the places, in order. One with fewer -- Plotly drops each vertex within a fraction of a pixel of the line through its neighbours, and a smooth fan of fifty steps drawn by Plotly 2.35.2 kept 37 -- has its points spread over its extent by their own x, as a linear axis draws them, or evenly, as a category axis does, but only when every vertex it kept between its ends stands at one of those places. Otherwise -- a log axis, an outline with no vertex kept between its ends, a curve that does not pass through its points -- where each point is drawn cannot be read, and none is given, with a warning: the caller outlines the whole shape, coarse but never away from the point. Spread without that check, as this did, a log axis's markers stood where a linear one would have drawn its points.

Which of some heights in an element's user units is drawn highest on the page, and which lowest. A chart flipped upright -- gridSVG draws R's charts with their y running up -- has them the other way round.

Marks an element as created (and therefore owned) by MAIDR. Public so trace code that clones or synthesizes highlight elements outside this utility can participate in ownership-aware disposal.

Returns true if the element was created by MAIDR (safe to remove on disposal). Original chart elements referenced for in-place highlighting are not owned and must never be removed.

Converts an SVG element to a Base64-encoded JPEG data URL.

Builds a chart's model with its selectors resolved inside the chart.

Every selector a model reads is looked up while new Figure() runs, so the chart's roots are set for that call rather than threaded through every trace constructor, and the model stays free of the DOM. Two charts whose producer gave them the same ids, or Plotly charts whose selectors name no chart at all, each find their own marks this way instead of the first chart's.

The elements a selector matches, in document order.

Inside roots when anything there matches. The selector is still matched against the whole document, so a part naming an ancestor of the chart -- #vl-1 svg rect, [id="svg-id"] path -- matches as before. When nothing inside matches, the rest of the page is searched, leaving out what lies inside another chart, and the console says so once per selector: a chart whose marks sit outside its own element reads them as it always did.

Selects all SVG elements matching a query and optionally clones them.

Selects a single SVG element matching a query and optionally clones it.

Clones an element, hides the copy, and inserts it straight after the original.

This is the side effect selectElement performs once it has found its element, split out so a caller can do the finding first. Resolving a positional* selector -- :nth-child(N) and friends -- while earlier clones are already in the DOM counts siblings the chart never drew, and answers with the clone of an earlier element; a caller with a list of such selectors has to look them all up before inserting anything (#1004).

Select the Nth element matching a query, in document order.

Useful when a single CSS selector matches multiple sibling elements (e.g. multi-series Vega-Lite line charts where each series renders as a separate <g class="mark-line role-mark layer_0_marks"> group, all with the same class). CSS :nth-child(N) cannot address the Nth matching group when classes differ; this helper does it via JS.

Always returns the live DOM element (no cloning side-effects), since the indexed-selection use case is for resolving live DOM nodes that downstream code (highlight pipeline, etc.) operates on directly.

Creates an empty, hidden, transparent SVG element of the specified type.

The paint of an element that createCircleElements gives the markers drawn beside it, read now, as plain values.

Creates one circle element per centre, styled to match the parent element's stroke or fill.

A whole series at once rather than a point at a time, because the two expensive parts of the job are per-series rather than per-point: the paint is one computed style for a line all of whose markers share it, and the insertion is one fragment. Reading a style back after inserting an element is what forces the browser to recalculate it, so a loop alternating the two paid a recalculation per point of every line, at construction and again on every live-data rebuild. A caller marking several elements can read each one's paint first, with markerPaintOf, and pass it in, so that no element's style is read after another's markers are inserted.

A marker's radius is twice the width the line it stands on is drawn at, and never less than MIN_MARKER_RADIUS. Sized from the stroke alone, a marker on a thin line, or on a band drawn by its fill alone -- whose stroke width still computes as 1px -- was a dot four pixels across, half the size of one on an ordinary line, which a reader could barely find.

Builds one line per request, each along one edge of one element's bounding box, and returns them detached.

A whole batch at once rather than a line at a time, for the reason given on createCircleElements: measuring an element after inserting a node beside it is what forces the browser to lay the chart out again, and a loop that alternated the two paid a layout per line. Reading every anchor first and building from the numbers costs one layout for the batch however many lines it holds -- and a candlestick or a box plot builds two per candle or per box, at construction and again on every live-data rebuild.

Building is split from inserting because where a line lands among its siblings is behaviour, not bookkeeping: an anchor that is also the original of a hidden clone pairs with that clone by previousElementSibling, so a line inserted between them changes which elements a trace reports as its originals and therefore what a high-contrast reader is shown. The caller inserts with insertDerived, at the point in its own writes where the line belongs.

Each anchor is measured and styled once even when several lines are drawn along it: inserting a hidden sibling does not move the anchor, so the second read only ever returned what the first did.

When a bounding box has zero width (vertical path) or zero height (horizontal path), a minimum span is used so the resulting line is visible.

Puts derived nodes into the document directly after the element they were derived from, one at a time and in the order they were built.

insertAdjacentElement(AFTER_END, ...) puts each node straight after the anchor, so building a then b and inserting both leaves [anchor, b, a]. That reversal is the child order every renderer, highlight and high-contrast pass has always seen, so it is reproduced exactly rather than tidied: the caller passes the nodes in the order it built them.

Where the caller makes this call matters as much as the order within it. A node inserted after an anchor that is itself the original of a hidden clone lands between the two, and AbstractTrace.getAllOriginalElements pairs a clone to its original by previousElementSibling; inserting earlier or later than the chart's own clones therefore changes which elements HighContrastService recolours. Callers insert at the point their one-at-a-time predecessor did.

An anchor with no parent inserts nothing, exactly as insertAdjacentElement does.

Draws the whiskers between box plots' caps and their boxes.

A box plot's selectors name the caps and the box, and a highlight only ever needs those. A renderer showing the chart's shape needs the whisker between them as well, or a box arrives as a rectangle with two detached dashes floating beyond it. The whisker runs from the cap's centre to the nearer edge of the box, and it is hidden: it is geometry for a renderer to read, not a mark for the chart to show.

A whole batch at once for the reason given on buildLineElements: one box plot's whiskers used to be measured after the previous one's had been inserted, so every box cost the browser two more layouts. The same element is measured once however many whiskers touch it -- a box and both its caps were read four times per box. The whiskers come back detached, for the caller to insert with insertDerived where its one-at-a-time predecessor did.

Creates a highlighted clone of an SVG element with enhanced visibility.

When the element is too small to see (see isTooSmallToSee), a visible <circle> is created at its centre instead: a copy of it would be as invisible as it is.

A group that holds shapes, as a Mermaid or Graphviz node, edge or cluster does, is outlined through those shapes instead of painted whole (see outlineShapes).

A line, a polyline, and a path drawn by its stroke alone (see isDrawnByStroke) are drawn as lines: stroked in the highlight colour, wider than drawn, and filled only where the chart fills them.

Copies the labels drawn over a mark its highlight fills, in the colour that reads on the highlight, each just above the label it copies.

A label drawn after its mark stays above the highlight, which is inserted just after the mark, but keeps the colour it was given for the mark: a white label on a red gantt task, or on a packet field high contrast painted black, sat on the highlight colour at 2.27:1. Each such label is copied over itself in whichever of colors contrasts more with the highlight, where the label itself falls below 4.5:1 on it; the label is left as the chart and high contrast painted it, and the copies go with the highlight. An outline the label draws round its glyphs is drawn in the other of colors, so the glyphs stand out from it as they did from the label's own. A label already readable on the highlight is left alone -- the dark label on a light mark's darker shade, which stops at 3:1 for it -- and so is everything that is not text over the filled shape: a label beside it or drawn under it, one on a shape drawn over the mark, as a treemap draws its items over their section, the labels of a group, which is outlined and keeps its fill, and text within a line's box.

Calculates a contrasting color (black or white) based on the element's fill color.

Applies CSS outline styling to highlight a subplot element.

Removes CSS outline highlighting from a subplot element.

Applies SVG stroke highlighting to a subplot with adaptive color based on background.

Removes SVG stroke highlighting from a subplot element.