grid decoration mark

src/axes.js

@@ -27,14 +27,14 @@ export function Axes(
 // Mutates axis.ticks!
 // TODO Populate tickFormat if undefined, too?
 export function autoAxisTicks({x, y, fx, fy}, {x: xAxis, y: yAxis, fx: fxAxis, fy: fyAxis}) {
-  if (fxAxis) autoAxisTicksK(fx, fxAxis, 80);
-  if (fyAxis) autoAxisTicksK(fy, fyAxis, 35);
-  if (xAxis) autoAxisTicksK(x, xAxis, 80);
-  if (yAxis) autoAxisTicksK(y, yAxis, 35);
+  if (fxAxis) autoAxisTickFormatK(fx, fxAxis);
+  if (fyAxis) autoAxisTickFormatK(fy, fyAxis);
+  if (xAxis) autoAxisTicksK(x, xAxis, 80), autoAxisTickFormatK(x, xAxis);
+  if (yAxis) autoAxisTicksK(y, yAxis, 35), autoAxisTickFormatK(y, yAxis);
 }
 
 function autoAxisTicksK(scale, axis, k) {
-  if (axis.ticks === undefined) {
+  if (axis.ticks === undefined && !isOrdinalScale(scale)) {
     const interval = scale.interval;
     if (interval !== undefined) {
       const [min, max] = extent(scale.scale.domain());
@@ -44,9 +44,12 @@ function autoAxisTicksK(scale, axis, k) {
       axis.ticks = (max - min) / k;
     }
   }
-  // D3’s ordinal scales simply use toString by default, but if the ordinal
-  // scale domain (or ticks) are numbers or dates (say because we’re applying a
-  // time interval to the ordinal scale), we want Plot’s default formatter.
+}
+
+// D3’s ordinal scales simply use toString by default, but if the ordinal
+// scale domain (or ticks) are numbers or dates (say because we’re applying a
+// time interval to the ordinal scale), we want Plot’s default formatter.
+function autoAxisTickFormatK(scale, axis) {
   if (axis.tickFormat === undefined && isOrdinalScale(scale)) {
     axis.tickFormat = formatDefault;
   }

src/context.js

@@ -1,7 +1,7 @@
 import {creator, select} from "d3";
 
-export function Context({document = window.document} = {}) {
-  return {document};
+export function Context({document = window.document} = {}, axes) {
+  return {axes, document};
 }
 
 export function create(name, {document}) {

src/index.js

@@ -8,6 +8,7 @@ export {delaunayLink, delaunayMesh, hull, voronoi, voronoiMesh} from "./marks/de
 export {Density, density} from "./marks/density.js";
 export {Dot, dot, dotX, dotY, circle, hexagon} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";
+export {Grid, grid, gridX, gridY} from "./marks/grid.js";
 export {Hexgrid, hexgrid} from "./marks/hexgrid.js";
 export {Image, image} from "./marks/image.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";

src/marks/grid.js

@@ -0,0 +1,89 @@
+import {create} from "../context.js";
+import {isOptions, number} from "../options.js";
+import {Mark} from "../plot.js";
+import {applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
+
+const defaults = {
+  ariaLabel: "grid",
+  fill: "none",
+  stroke: "currentColor",
+  strokeOpacity: 0.1
+};
+
+export class Grid extends Mark {
+  constructor(options = {}, x, y) {
+    const {
+      ticks,
+      inset = 0,
+      insetTop = inset,
+      insetRight = inset,
+      insetBottom = inset,
+      insetLeft = inset
+    } = options;
+    super(undefined, undefined, options, defaults);
+    this.insetTop = number(insetTop);
+    this.insetRight = number(insetRight);
+    this.insetBottom = number(insetBottom);
+    this.insetLeft = number(insetLeft);
+    this.ticks = ticks;
+    this.x = x;
+    this.y = y;
+  }
+  render(index, scales, channels, dimensions, context) {
+    const {x, y} = scales;
+    const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
+    const {insetTop, insetRight, insetBottom, insetLeft, ticks} = this;
+    const {axes} = context;
+    const ax = this.x === "auto" ? !!x : this.x;
+    const ay = this.y === "auto" ? !!y : this.y;
+    if (ax && !x) throw new Error("missing scale: x");
+    if (ay && !y) throw new Error("missing scale: y");
+    const tx = !ax? [] : ticks !== undefined ? ticks : axes.x?.ticks;
+    const ty = !ay? [] : ticks !== undefined ? ticks : axes.y?.ticks;
+    return create("svg:g", context)
+        .call(applyIndirectStyles, this, scales, dimensions)
+        .call(applyTransform, this, {})
+        .call(g => g.selectAll()
+          .data(tickValues(x, tx))
+          .enter()
+          .append("line")
+            .call(applyDirectStyles, this)
+            .attr("x1", x)
+            .attr("x2", x)
+            .attr("y1", marginTop + insetTop)
+            .attr("y2", height - marginBottom - insetBottom))
+        .call(g => g.selectAll()
+          .data(tickValues(y, ty))
+          .enter()
+          .append("line")
+            .call(applyDirectStyles, this)
+            .attr("y1", y)
+            .attr("y2", y)
+            .attr("x1", marginLeft + insetLeft)
+            .attr("x2", width - marginRight - insetRight))
+      .node();
+  }
+}
+
+function tickValues(scale, ticks) {
+  return Array.isArray(ticks) ? ticks : scale.ticks(ticks);
+}
+
+function mergeOptions(ticks, options) {
+  return isOptions(ticks) ? ticks : {...options, ticks};
+}
+
+export function grid(ticks, options) {
+  options = mergeOptions(ticks, options);
+  return new Grid(options, "auto", "auto");
+}
+
+export function gridX(ticks, options) {
+  options = mergeOptions(ticks, options);
+  return new Grid(options, true, false);
+}
+
+export function gridY(ticks, options) {
+  options = mergeOptions(ticks, options);
+  return new Grid(options, false, true);
+}

src/plot.js

@@ -88,7 +88,7 @@ export function plot(options = {}) {
   const scales = ScaleFunctions(scaleDescriptors);
   const axes = Axes(scaleDescriptors, options);
   const dimensions = Dimensions(scaleDescriptors, axes, options);
-  const context = Context(options);
+  const context = Context(options, axes);
 
   autoScaleRange(scaleDescriptors, dimensions);
   autoAxisTicks(scaleDescriptors, axes);