Support z in the difference mark

src/marks/difference.d.ts

@@ -1,4 +1,4 @@
-import type {ChannelValueSpec} from "../channel.js";
+import type {ChannelValue, ChannelValueSpec} from "../channel.js";
 import type {CurveOptions} from "../curve.js";
 import type {Data, MarkOptions, RenderableMark} from "../mark.js";
 
@@ -61,6 +61,14 @@ export interface DifferenceOptions extends MarkOptions, CurveOptions {
    * defaults to **fillOpacity**.
    */
   negativeFillOpacity?: number;
+
+  /**
+   * An optional ordinal channel for grouping data into series to be drawn as
+   * separate areas; defaults to **fillPositive** if a channel for the positive
+   * area, **fillNegative** if a channel for the negative area, or **stroke** if
+   * a channel.
+   */
+  z?: ChannelValue;
 }
 
 /** TODO */

src/marks/difference.js

@@ -24,7 +24,6 @@ export function differenceY(
     stroke,
     strokeOpacity,
     z = maybeColorChannel(stroke)[0],
-    clip = true,
     tip,
     render,
     ...options
@@ -45,7 +44,7 @@ export function differenceY(
             z,
             fill: positiveFill,
             fillOpacity: positiveFillOpacity,
-            render: composeRender(render, clipDifference(true)),
+            render: composeRender(render, clipDifferenceY(true)),
             ...options
           }),
           {ariaLabel: "positive difference"}
@@ -61,7 +60,7 @@ export function differenceY(
             z,
             fill: negativeFill,
             fillOpacity: negativeFillOpacity,
-            render: composeRender(render, clipDifference(false)),
+            render: composeRender(render, clipDifferenceY(false)),
             ...options
           }),
           {ariaLabel: "negative difference"}
@@ -74,7 +73,7 @@ export function differenceY(
       stroke,
       strokeOpacity,
       tip,
-      clip,
+      clip: true,
       ...options
     })
   );
@@ -108,20 +107,23 @@ function memo(v) {
   return {transform: (data) => V || (V = valueof(data, value)), label};
 }
 
-function clipDifference(positive) {
+function clipDifferenceY(positive) {
   return (index, scales, channels, dimensions, context, next) => {
-    const clip = getClipId();
-    const clipPath = create("svg:clipPath", context).attr("id", clip).node();
     const {x1, x2} = channels;
     const {height} = dimensions;
     const y1 = new Float32Array(x1.length);
     const y2 = new Float32Array(x2.length);
     (positive === inferScaleOrder(scales.y) < 0 ? y1 : y2).fill(height);
-    const c = next(index, scales, {...channels, x2: x1, y2}, dimensions, context);
-    clipPath.append(...c.childNodes);
+    const c = next(index, scales, {...channels, x2: x1, y2}, dimensions, context).querySelectorAll("path");
     const g = next(index, scales, {...channels, x1: x2, y1}, dimensions, context);
-    g.insertBefore(clipPath, g.firstChild);
-    g.setAttribute("clip-path", `url(#${clip})`);
+    let i = -1;
+    for (const node of g.querySelectorAll("path")) {
+      const clip = getClipId();
+      const clipPath = create("svg:clipPath", context).attr("id", clip).node();
+      clipPath.append(c[++i]);
+      node.parentElement.insertBefore(clipPath, node);
+      node.setAttribute("clip-path", `url(#${clip})`);
+    }
     return g;
   };
 }