set context.path early

src/context.js

@@ -1,9 +1,16 @@
-import {creator, select} from "d3";
+import {creator, geoPath, select} from "d3";
 import {maybeClip} from "./options.js";
+import {xyProjection} from "./projection.js";
 
-export function createContext(options = {}) {
+export function createContext(options = {}, scales) {
   const {document = typeof window !== "undefined" ? window.document : undefined, clip} = options;
-  return {document, clip: maybeClip(clip)};
+  return {
+    document,
+    clip: maybeClip(clip),
+    path() {
+      return geoPath(this.projection ?? (scales && xyProjection(scales)));
+    }
+  };
 }
 
 export function create(name, {document}) {

src/marks/line.js

@@ -1,4 +1,4 @@
-import {geoPath, line as shapeLine} from "d3";
+import {line as shapeLine} from "d3";
 import {create} from "../context.js";
 import {curveAuto, maybeCurveAuto} from "../curve.js";
 import {Mark} from "../mark.js";
@@ -67,7 +67,7 @@ export class Line extends Mark {
           .attr(
             "d",
             curve === curveAuto && context.projection
-              ? sphereLine(context.projection, X, Y)
+              ? sphereLine(context.path(), X, Y)
               : shapeLine()
                   .curve(curve)
                   .defined((i) => i >= 0)
@@ -79,8 +79,7 @@ export class Line extends Mark {
   }
 }
 
-function sphereLine(projection, X, Y) {
-  const path = geoPath(projection);
+function sphereLine(path, X, Y) {
   X = coerceNumbers(X);
   Y = coerceNumbers(Y);
   return (I) => {

src/marks/link.js

@@ -1,4 +1,4 @@
-import {geoPath, pathRound as path} from "d3";
+import {pathRound as path} from "d3";
 import {create} from "../context.js";
 import {curveAuto, maybeCurveAuto} from "../curve.js";
 import {Mark} from "../mark.js";
@@ -52,7 +52,7 @@ export class Link extends Mark {
           .attr(
             "d",
             curve === curveAuto && context.projection
-              ? sphereLink(context.projection, X1, Y1, X2, Y2)
+              ? sphereLink(context.path(), X1, Y1, X2, Y2)
               : (i) => {
                   const p = path();
                   const c = curve(p);
@@ -70,8 +70,7 @@ export class Link extends Mark {
   }
 }
 
-function sphereLink(projection, X1, Y1, X2, Y2) {
-  const path = geoPath(projection);
+function sphereLink(path, X1, Y1, X2, Y2) {
   X1 = coerceNumbers(X1);
   Y1 = coerceNumbers(Y1);
   X2 = coerceNumbers(X2);

src/plot.js

@@ -1,4 +1,4 @@
-import {creator, geoPath, select} from "d3";
+import {creator, select} from "d3";
 import {createChannel, inferChannelScale} from "./channel.js";
 import {createContext} from "./context.js";
 import {createDimensions} from "./dimensions.js";
@@ -11,7 +11,7 @@ import {frame} from "./marks/frame.js";
 import {tip} from "./marks/tip.js";
 import {isColor, isIterable, isNone, isScaleOptions} from "./options.js";
 import {dataify, lengthof, map, yes, maybeIntervalTransform, subarray} from "./options.js";
-import {createProjection, getGeometryChannels, hasProjection, xyProjection} from "./projection.js";
+import {createProjection, getGeometryChannels, hasProjection} from "./projection.js";
 import {createScales, createScaleFunctions, autoScaleRange, exposeScales} from "./scales.js";
 import {innerDimensions, outerDimensions} from "./scales.js";
 import {isPosition, registry as scaleRegistry} from "./scales/index.js";
@@ -151,7 +151,7 @@ export function plot(options = {}) {
   const superdimensions = fx || fy ? actualDimensions(scales, dimensions) : dimensions;
 
   // Initialize the context.
-  const context = createContext(options);
+  const context = createContext(options, scales);
   const document = context.document;
   const svg = creator("svg").call(document.documentElement);
   let figure = svg; // replaced with the figure element, if any
@@ -236,11 +236,6 @@ export function plot(options = {}) {
     facetTranslate = facetTranslator(fx, fy, dimensions);
   }
 
-  // A path generator for marks that want to draw GeoJSON.
-  context.path = function () {
-    return geoPath(this.projection ?? xyProjection(scales));
-  };
-
   // Compute value objects, applying scales and projection as needed.
   for (const [mark, state] of stateByMark) {
     state.values = mark.scale(state.channels, scales, context);

src/transforms/centroid.js

@@ -1,4 +1,4 @@
-import {geoCentroid as GeoCentroid, geoPath} from "d3";
+import {geoCentroid as GeoCentroid} from "d3";
 import {memoize1} from "../memoize.js";
 import {identity, valueof} from "../options.js";
 import {initializer} from "./basic.js";
@@ -9,19 +9,19 @@ export function centroid({geometry = identity, ...options} = {}) {
     // Suppress defaults for x and y since they will be computed by the initializer.
     // Propagate the (memoized) geometry channel in case it’s still needed.
     {...options, x: null, y: null, geometry: {transform: getG}},
-    (data, facets, channels, scales, dimensions, {projection}) => {
+    (data, facets, channels, scales, dimensions, context) => {
       const G = getG(data);
       const n = G.length;
       const X = new Float64Array(n);
       const Y = new Float64Array(n);
-      const path = geoPath(projection);
-      for (let i = 0; i < n; ++i) [X[i], Y[i]] = path.centroid(G[i]);
+      const {centroid} = context.path();
+      for (let i = 0; i < n; ++i) [X[i], Y[i]] = centroid(G[i]);
       return {
         data,
         facets,
         channels: {
-          x: {value: X, scale: projection == null ? "x" : null, source: null},
-          y: {value: Y, scale: projection == null ? "y" : null, source: null}
+          x: {value: X, scale: null, source: null},
+          y: {value: Y, scale: null, source: null}
         }
       };
     }