fix clip: frame for band scales

src/marks/area.js

@@ -46,7 +46,7 @@ export class Area extends Mark {
   render(index, scales, channels, dimensions, context) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales, 0, 0)
       .call((g) =>
         g

src/marks/arrow.js

@@ -66,7 +66,7 @@ export class Arrow extends Mark {
     const wingScale = headLength / 1.5;
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/bar.js

@@ -28,7 +28,7 @@ export class AbstractBar extends Mark {
   render(index, scales, channels, dimensions, context) {
     const {rx, ry} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(this._transform, this, scales)
       .call((g) =>
         g

src/marks/delaunay.js

@@ -124,7 +124,7 @@ class DelaunayLink extends Mark {
     }
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
@@ -174,7 +174,7 @@ class AbstractDelaunayMark extends Mark {
     }
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z
@@ -245,7 +245,7 @@ class Voronoi extends Mark {
     }
 
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call(
         Z

src/marks/density.js

@@ -50,7 +50,7 @@ export class Density extends Mark {
     const {contours} = channels;
     const path = geoPath();
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {})
       .call((g) =>
         g

src/marks/dot.js

@@ -73,7 +73,7 @@ export class Dot extends Mark {
     const size = R ? undefined : r * r * Math.PI;
     if (negative(r)) index = [];
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/marks/frame.js

@@ -24,7 +24,7 @@ export class Frame extends Mark {
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
     const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
     return create("svg:rect", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyDirectStyles, this)
       .call(applyTransform, this, {})
       .attr("x", marginLeft + insetLeft)

src/marks/geo.js

@@ -37,7 +37,7 @@ export class Geo extends Mark {
     if (negative(r)) index = [];
     else if (r !== undefined) path.pointRadius(r);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) => {
         g.selectAll()

src/marks/hexgrid.js

@@ -46,7 +46,7 @@ export class Hexgrid extends Mark {
       }
     }
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {}, offset + ox, offset + oy)
       .call((g) => g.append("path").call(applyDirectStyles, this).attr("d", d))
       .node();

src/marks/image.js

@@ -70,7 +70,7 @@ export class Image extends Mark {
     const {x: X, y: Y, width: W, height: H, src: S} = channels;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/marks/line.js

@@ -67,7 +67,7 @@ export class Line extends Mark {
     const {x: X, y: Y} = channels;
     const {curve} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/linearRegression.js

@@ -40,7 +40,7 @@ class LinearRegression extends Mark {
     const {x: X, y: Y, z: Z} = channels;
     const {ci} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/link.js

@@ -33,7 +33,7 @@ export class Link extends Mark {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
     const {curve} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, scales)
       .call((g) =>
         g

src/marks/rect.js

@@ -58,7 +58,7 @@ export class Rect extends Mark {
     const {projection} = context;
     const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X1 && X2 && x, y: Y1 && Y2 && y}, 0, 0)
       .call((g) =>
         g

src/marks/rule.js

@@ -33,7 +33,7 @@ export class RuleX extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetTop, insetBottom} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions)
+      .call(applyIndirectStyles, this, dimensions)
       .call(applyTransform, this, {x: X && x}, offset, 0)
       .call((g) =>
         g
@@ -81,7 +81,7 @@ export class RuleY extends Mark {
     const {width, height, marginTop, marginRight, marginLeft, marginBottom} = dimensions;
     const {insetLeft, insetRight} = this;
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {y: Y && y}, 0, offset)
       .call((g) =>
         g

src/marks/text.js

@@ -88,7 +88,7 @@ export class Text extends Mark {
     const {rotate} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyIndirectTextStyles, this, T, dimensions)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>

src/marks/tick.js

@@ -15,7 +15,7 @@ class AbstractTick extends Mark {
   }
   render(index, scales, channels, dimensions, context) {
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(this._transform, this, scales)
       .call((g) =>
         g

src/marks/vector.js

@@ -92,7 +92,7 @@ export class Vector extends Mark {
     const {length, rotate, anchor, shape, r} = this;
     const [cx, cy] = applyFrameAnchor(this, dimensions);
     return create("svg:g", context)
-      .call(applyIndirectStyles, this, scales, dimensions, context)
+      .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
       .call((g) =>
         g

src/style.js

@@ -1,4 +1,5 @@
 import {geoPath, group, namespaces} from "d3";
+import {create} from "./context.js";
 import {defined, nonempty} from "./defined.js";
 import {formatDefault} from "./format.js";
 import {
@@ -306,52 +307,69 @@ export function maybeClip(clip) {
   return maybeKeyword(clip, "clip", ["frame", "sphere"]);
 }
 
-export function applyIndirectStyles(selection, mark, scales, dimensions, context) {
-  applyAttr(selection, "aria-label", mark.ariaLabel);
-  applyAttr(selection, "aria-description", mark.ariaDescription);
-  applyAttr(selection, "aria-hidden", mark.ariaHidden);
-  applyAttr(selection, "fill", mark.fill);
-  applyAttr(selection, "fill-opacity", mark.fillOpacity);
-  applyAttr(selection, "stroke", mark.stroke);
-  applyAttr(selection, "stroke-width", mark.strokeWidth);
-  applyAttr(selection, "stroke-opacity", mark.strokeOpacity);
-  applyAttr(selection, "stroke-linejoin", mark.strokeLinejoin);
-  applyAttr(selection, "stroke-linecap", mark.strokeLinecap);
-  applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit);
-  applyAttr(selection, "stroke-dasharray", mark.strokeDasharray);
-  applyAttr(selection, "stroke-dashoffset", mark.strokeDashoffset);
-  applyAttr(selection, "shape-rendering", mark.shapeRendering);
-  applyAttr(selection, "paint-order", mark.paintOrder);
-  applyAttr(selection, "pointer-events", mark.pointerEvents);
+// Note: may mutate selection.node!
+function applyClip(selection, mark, dimensions, context) {
+  let clipUrl;
   switch (mark.clip) {
     case "frame": {
-      const {x, y} = scales;
       const {width, height, marginLeft, marginRight, marginTop, marginBottom} = dimensions;
       const id = getClipId();
-      selection
-        .attr("clip-path", `url(#${id})`)
-        .append("clipPath")
-        .attr("id", id)
-        .append("rect")
-        .attr("x", marginLeft - (x?.bandwidth ? x.bandwidth() / 2 : 0))
-        .attr("y", marginTop - (y?.bandwidth ? y.bandwidth() / 2 : 0))
-        .attr("width", width - marginRight - marginLeft)
-        .attr("height", height - marginTop - marginBottom);
+      clipUrl = `url(#${id})`;
+      selection = create("svg:g", context)
+        .call((g) =>
+          g
+            .append("svg:clipPath")
+            .attr("id", id)
+            .append("rect")
+            .attr("x", marginLeft)
+            .attr("y", marginTop)
+            .attr("width", width - marginRight - marginLeft)
+            .attr("height", height - marginTop - marginBottom)
+        )
+        .each(function () {
+          this.appendChild(selection.node());
+          selection.node = () => this; // Note: mutation!
+        });
       break;
     }
     case "sphere": {
       const {projection} = context;
       if (!projection) throw new Error(`the "sphere" clip option requires a projection`);
       const id = getClipId();
+      clipUrl = `url(#${id})`;
       selection
-        .attr("clip-path", `url(#${id})`)
         .append("clipPath")
         .attr("id", id)
         .append("path")
         .attr("d", geoPath(projection)({type: "Sphere"}));
       break;
     }
   }
+  // Here we’re careful to apply the ARIA attributes to the outer G element when
+  // clipping is applied, and to apply the ARIA attributes before any other
+  // attributes (for readability).
+  applyAttr(selection, "aria-label", mark.ariaLabel);
+  applyAttr(selection, "aria-description", mark.ariaDescription);
+  applyAttr(selection, "aria-hidden", mark.ariaHidden);
+  applyAttr(selection, "clip-path", clipUrl);
+}
+
+// Note: may mutate selection.node!
+export function applyIndirectStyles(selection, mark, dimensions, context) {
+  applyClip(selection, mark, dimensions, context);
+  applyAttr(selection, "fill", mark.fill);
+  applyAttr(selection, "fill-opacity", mark.fillOpacity);
+  applyAttr(selection, "stroke", mark.stroke);
+  applyAttr(selection, "stroke-width", mark.strokeWidth);
+  applyAttr(selection, "stroke-opacity", mark.strokeOpacity);
+  applyAttr(selection, "stroke-linejoin", mark.strokeLinejoin);
+  applyAttr(selection, "stroke-linecap", mark.strokeLinecap);
+  applyAttr(selection, "stroke-miterlimit", mark.strokeMiterlimit);
+  applyAttr(selection, "stroke-dasharray", mark.strokeDasharray);
+  applyAttr(selection, "stroke-dashoffset", mark.strokeDashoffset);
+  applyAttr(selection, "shape-rendering", mark.shapeRendering);
+  applyAttr(selection, "paint-order", mark.paintOrder);
+  applyAttr(selection, "pointer-events", mark.pointerEvents);
 }
 
 export function applyDirectStyles(selection, mark) {