Use (and re-use) the same clip-path when two renders are clipped with the same shape

Author: Fil

src/style.js

@@ -1,4 +1,4 @@
-import {geoPath, group, namespaces} from "d3";
+import {geoPath, group, namespaces, select} from "d3";
 import {create} from "./context.js";
 import {defined, nonempty} from "./defined.js";
 import {formatDefault} from "./format.js";
@@ -306,42 +306,53 @@ export function maybeClip(clip) {
   return clip;
 }
 
+function clipDefs({ownerSVGElement}) {
+  const svg = select(ownerSVGElement);
+  const defs = svg.select("defs.clip");
+  return defs.size() ? defs : svg.insert("defs", ":first-child").attr("class", "clip");
+}
+
 // Note: may mutate selection.node!
 function applyClip(selection, mark, dimensions, context) {
   let clipUrl;
   const {clip = context.clip} = mark;
   switch (clip) {
     case "frame": {
-      const {width, height, marginLeft, marginRight, marginTop, marginBottom} = dimensions;
-      const id = getClipId();
-      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!
-        });
+      const clips = context.clips ?? (context.clips = new Map());
+      if (!clips.has("frame")) {
+        const {width, height, marginLeft, marginRight, marginTop, marginBottom} = dimensions;
+        const id = getClipId();
+        clips.set("frame", id);
+        clipDefs(context)
+          .append("clipPath")
+          .attr("id", id)
+          .append("rect")
+          .attr("x", marginLeft)
+          .attr("y", marginTop)
+          .attr("width", width - marginRight - marginLeft)
+          .attr("height", height - marginTop - marginBottom);
+      }
+      selection = create("svg:g", context).each(function () {
+        this.appendChild(selection.node());
+        selection.node = () => this; // Note: mutation!
+      });
+      clipUrl = `url(#${clips.get("frame")})`;
       break;
     }
     case "sphere": {
+      const clips = context.clips ?? (context.clips = new Map());
       const {projection} = context;
       if (!projection) throw new Error(`the "sphere" clip option requires a projection`);
-      const id = getClipId();
-      clipUrl = `url(#${id})`;
-      selection
-        .append("clipPath")
-        .attr("id", id)
-        .append("path")
-        .attr("d", geoPath(projection)({type: "Sphere"}));
+      if (!clips.has("projection")) {
+        const id = getClipId();
+        clips.set("projection", id);
+        clipDefs(context)
+          .append("clipPath")
+          .attr("id", id)
+          .append("path")
+          .attr("d", geoPath(projection)({type: "Sphere"}));
+      }
+      clipUrl = `url(#${clips.get("projection")})`;
       break;
     }
   }