Voronoi initializer (for pointer interactions)

src/marks/delaunay.js

@@ -1,16 +1,16 @@
 import {group, pathRound as path, select, Delaunay} from "d3";
 import {create} from "../context.js";
 import {maybeCurve} from "../curve.js";
+import {defined} from "../defined.js";
 import {Mark} from "../mark.js";
 import {markers, applyMarkers} from "../marker.js";
 import {constant, maybeTuple, maybeZ} from "../options.js";
-import {
-  applyChannelStyles,
-  applyDirectStyles,
-  applyFrameAnchor,
-  applyIndirectStyles,
-  applyTransform
-} from "../style.js";
+import {applyPosition} from "../projection.js";
+import {applyFrameAnchor, applyTransform} from "../style.js";
+import {applyChannelStyles, applyDirectStyles, applyIndirectStyles} from "../style.js";
+import {basic, initializer} from "../transforms/basic.js";
+import {exclusiveFacets} from "../transforms/exclusiveFacets.js";
+import {maybeGroup} from "../transforms/group.js";
 
 const delaunayLinkDefaults = {
   ariaLabel: "delaunay link",
@@ -221,45 +221,45 @@ class Voronoi extends Mark {
         y: {value: y, scale: "y", optional: true},
         z: {value: z, optional: true}
       },
-      options,
+      initializer(options, function (data, facets, channels, scales, dimensions, context) {
+        let {x: X, y: Y, z: Z} = channels;
+        ({x: X, y: Y} = applyPosition(channels, scales, context));
+        Z = Z?.value;
+        const C = new Array((X ?? Y).length).fill(null);
+        const [cx, cy] = applyFrameAnchor(this, dimensions);
+        const xi = X ? (i) => X[i] : constant(cx);
+        const yi = Y ? (i) => Y[i] : constant(cy);
+        for (let I of facets) {
+          if (X) I = I.filter((i) => defined(xi(i)));
+          if (Y) I = I.filter((i) => defined(yi(i)));
+          for (const [, J] of maybeGroup(I, Z)) {
+            const delaunay = Delaunay.from(J, xi, yi);
+            const voronoi = voronoiof(delaunay, dimensions);
+            for (let i = 0, n = J.length; i < n; ++i) {
+              C[J[i]] = voronoi.renderCell(i);
+            }
+          }
+        }
+        return {data, facets, channels: {cells: {value: C}}};
+      }),
       voronoiDefaults
     );
   }
   render(index, scales, channels, dimensions, context) {
     const {x, y} = scales;
-    const {x: X, y: Y, z: Z} = channels;
-    const [cx, cy] = applyFrameAnchor(this, dimensions);
-    const xi = X ? (i) => X[i] : constant(cx);
-    const yi = Y ? (i) => Y[i] : constant(cy);
-    const mark = this;
-
-    function cells(index) {
-      const delaunay = Delaunay.from(index, xi, yi);
-      const voronoi = voronoiof(delaunay, dimensions);
-      select(this)
-        .selectAll()
-        .data(index)
-        .enter()
-        .append("path")
-        .call(applyDirectStyles, mark)
-        .attr("d", (_, i) => voronoi.renderCell(i))
-        .call(applyChannelStyles, mark, channels);
-    }
-
+    const {x: X, y: Y, cells: C} = channels;
     return create("svg:g", context)
       .call(applyIndirectStyles, this, dimensions, context)
       .call(applyTransform, this, {x: X && x, y: Y && y})
-      .call(
-        Z
-          ? (g) =>
-              g
-                .selectAll()
-                .data(group(index, (i) => Z[i]).values())
-                .enter()
-                .append("g")
-                .each(cells)
-          : (g) => g.datum(index).each(cells)
-      )
+      .call((g) => {
+        g.selectAll()
+          .data(index)
+          .enter()
+          .append("path")
+          .call(applyDirectStyles, this)
+          .attr("d", (i) => C[i])
+          .call(applyChannelStyles, this, channels);
+      })
       .node();
   }
 }
@@ -279,9 +279,9 @@ function voronoiof(delaunay, dimensions) {
   return delaunay.voronoi([marginLeft, marginTop, width - marginRight, height - marginBottom]);
 }
 
-function delaunayMark(DelaunayMark, data, {x, y, ...options} = {}) {
+function delaunayMark(DelaunayMark, data, {x, y, initializer, ...options} = {}) {
   [x, y] = maybeTuple(x, y);
-  return new DelaunayMark(data, {...options, x, y});
+  return new DelaunayMark(data, {...basic({...options, x, y}, exclusiveFacets), initializer});
 }
 
 export function delaunayLink(data, options) {

src/style.js

@@ -3,7 +3,7 @@ import {create} from "./context.js";
 import {defined, nonempty} from "./defined.js";
 import {formatDefault} from "./format.js";
 import {isNone, isNoneish, isRound, maybeColorChannel, maybeNumberChannel} from "./options.js";
-import {keyof, number, string} from "./options.js";
+import {keyof, keyword, number, string} from "./options.js";
 import {warn} from "./warnings.js";
 
 export const offset = (typeof window !== "undefined" ? window.devicePixelRatio > 1 : typeof it === "undefined") ? 0 : 0.5; // prettier-ignore
@@ -297,6 +297,16 @@ export function* groupIndex(I, position, mark, channels) {
   }
 }
 
+// TODO Accept other types of clips (paths, urls, x, y, other marks…)?
+// https://github.com/observablehq/plot/issues/181
+export function maybeClip(clip) {
+  if (clip === true) clip = "frame";
+  else if (clip === false) clip = null;
+  else if (clip != null) clip = keyword(clip, "clip", ["frame", "sphere"]);
+  return clip;
+}
+
+// TODO avoid creating a new clip-path each time?
 // Note: may mutate selection.node!
 function applyClip(selection, mark, dimensions, context) {
   let clipUrl;