custom grid ticks

README.md

@@ -276,7 +276,7 @@ Plot automatically generates axes for position scales. You can configure these a
 * *scale*.**tickPadding** - the separation between the tick and its label (in pixels; default 3)
 * *scale*.**tickFormat** - how to format tick values as a string (a function or format specifier)
 * *scale*.**tickRotate** - whether to rotate tick labels (an angle in degrees clockwise; default 0)
-* *scale*.**grid** - if true, draw grid lines across the plot for each tick
+* *scale*.**grid** - if true, a positive number, or an array of tick values, draw grid lines across the plot for each tick; if an array of tick values is specified, the default domain will include them 
 * *scale*.**line** - if true, draw the axis line
 * *scale*.**label** - a string to label the axis
 * *scale*.**labelAnchor** - the label anchor: *top*, *right*, *bottom*, *left*, or *center*

src/axis.js

@@ -2,7 +2,7 @@ import {axisTop, axisBottom, axisRight, axisLeft, create, format, utcFormat} fro
 import {formatIsoDate} from "./format.js";
 import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./mark.js";
 import {radians} from "./math.js";
-import {impliedString} from "./style.js";
+import {impliedString, offset} from "./style.js";
 
 export class AxisX {
   constructor({
@@ -27,7 +27,7 @@ export class AxisX {
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
     this.fontVariant = impliedString(fontVariant, "normal");
-    this.grid = boolean(grid);
+    this.grid = maybeTicks(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
     this.labelOffset = number(labelOffset);
@@ -59,22 +59,27 @@ export class AxisX {
       labelAnchor,
       labelOffset,
       line,
-      tickRotate
+      tickRotate,
+      ticks
     } = this;
     const offset = this.name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
     return create("svg:g")
         .attr("transform", `translate(0,${ty})`)
+        .call(!grid ? () => {}
+            : createGridX(
+              grid(x, ticks),
+              x,
+              fy ? fy.bandwidth() : offsetSign * (marginBottom + marginTop - height),
+              fy ? take(fy.domain().map(d => fy(d) - ty), index) : [0]
+            ))
         .call(createAxis(axis === "top" ? axisTop : axisBottom, x, this))
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
         .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
-        .call(!grid ? () => {}
-          : fy ? gridFacetX(index, fy, -ty)
-          : gridX(offsetSign * (marginBottom + marginTop - height)))
         .call(!label ? () => {} : g => g.append("text")
             .attr("fill", "currentColor")
             .attr("transform", `translate(${
@@ -114,7 +119,7 @@ export class AxisY {
     this.tickPadding = number(tickPadding);
     this.tickFormat = tickFormat;
     this.fontVariant = impliedString(fontVariant, "normal");
-    this.grid = boolean(grid);
+    this.grid = maybeTicks(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
     this.labelOffset = number(labelOffset);
@@ -144,22 +149,27 @@ export class AxisY {
       labelAnchor,
       labelOffset,
       line,
-      tickRotate
+      tickRotate,
+      ticks
     } = this;
     const offset = this.name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
     return create("svg:g")
         .attr("transform", `translate(${tx},0)`)
+        .call(!grid ? () => {}
+          : createGridY(
+              grid(y, ticks),
+              y,
+              fx ? fx.bandwidth() : offsetSign * (marginLeft + marginRight - width),
+              fx ? take(fx.domain().map(d => fx(d) - tx), index) : [0]
+            ))
         .call(createAxis(axis === "right" ? axisRight : axisLeft, y, this))
         .call(maybeTickRotate, tickRotate)
         .attr("font-size", null)
         .attr("font-family", null)
         .attr("font-variant", fontVariant)
         .call(!line ? g => g.select(".domain").remove() : () => {})
-        .call(!grid ? () => {}
-          : fx ? gridFacetY(index, fx, -tx)
-          : gridY(offsetSign * (marginLeft + marginRight - width)))
         .call(!label ? () => {} : g => g.append("text")
             .attr("fill", "currentColor")
             .attr("transform", `translate(${labelOffset * offsetSign},${
@@ -178,40 +188,6 @@ export class AxisY {
   }
 }
 
-function gridX(y2) {
-  return g => g.selectAll(".tick line")
-    .clone(true)
-      .attr("stroke-opacity", 0.1)
-      .attr("y2", y2);
-}
-
-function gridY(x2) {
-  return g => g.selectAll(".tick line")
-    .clone(true)
-      .attr("stroke-opacity", 0.1)
-      .attr("x2", x2);
-}
-
-function gridFacetX(index, fy, ty) {
-  const dy = fy.bandwidth();
-  const domain = fy.domain();
-  return g => g.selectAll(".tick")
-    .append("path")
-      .attr("stroke", "currentColor")
-      .attr("stroke-opacity", 0.1)
-      .attr("d", (index ? take(domain, index) : domain).map(v => `M0,${fy(v) + ty}v${dy}`).join(""));
-}
-
-function gridFacetY(index, fx, tx) {
-  const dx = fx.bandwidth();
-  const domain = fx.domain();
-  return g => g.selectAll(".tick")
-    .append("path")
-      .attr("stroke", "currentColor")
-      .attr("stroke-opacity", 0.1)
-      .attr("d", (index ? take(domain, index) : domain).map(v => `M${fx(v) + tx},0h${dx}`).join(""));
-}
-
 // D3 doesn’t provide a tick format for ordinal scales; we want shorthand when
 // an ordinal domain is numbers or dates, and we want null to mean the empty
 // string, not the default identity format.
@@ -254,3 +230,41 @@ function maybeTickRotate(g, rotate) {
     text.setAttribute("dy", "0.32em");
   }
 }
+
+function createGridX(ticks, x, dy, steps) {
+  return g => g.append("g")
+      .attr("class", "grid")
+      .attr("stroke", "currentColor")
+      .attr("stroke-opacity", "0.1")
+      .selectAll()
+      .data(steps)
+      .join("g")
+        .attr("transform", v => `translate(${offset},${v})`)
+        .selectAll()
+        .data(ticks)
+        .join("path")
+        .attr("d", d => `M${x(d)},0v${dy}`);
+}
+
+function createGridY(ticks, y, dx, steps) {
+  return g => g.append("g")
+      .attr("class", "grid")
+      .attr("stroke", "currentColor")
+      .attr("stroke-opacity", "0.1")
+      .selectAll()
+      .data(steps)
+      .join("g")
+        .attr("transform", v => `translate(${v},${offset})`)
+        .selectAll()
+        .data(ticks)
+        .join("path")
+        .attr("d", d => `M0,${y(d)}h${dx}`);
+}
+
+function maybeTicks(grid) {
+  if (!grid) return false;
+  if (grid === true) return (scale, ticks) => (scale.ticks ? scale.ticks(ticks) : scale.domain());
+  if (Array.isArray(grid)) return () => grid;
+  if (grid === +grid) return (scale) => (scale.ticks ? scale.ticks.apply(scale, [grid]) : scale.domain());
+  throw new Error(`Unexpected grid option: ${grid}`);
+}

src/mark.js

@@ -220,7 +220,7 @@ export function where(data, test) {
 
 // Returns an array [values[index[0]], values[index[1]], …].
 export function take(values, index) {
-  return Array.from(index, i => values[i]);
+  return index ? Array.from(index, i => values[i]) : values;
 }
 
 export function maybeInput(key, options) {

src/scales.js

@@ -18,19 +18,23 @@ export function Scales(channels, {
   clamp,
   align,
   padding,
+  grid,
   ...options
 } = {}) {
   const scales = {};
   for (const key of registry.keys()) {
-    const scaleChannels = channels.get(key);
     const scaleOptions = options[key];
-    if (scaleChannels || scaleOptions) {
+    const ticks = scaleOptions && Array.isArray(scaleOptions.grid) ? scaleOptions.grid : Array.isArray(grid) ? grid : null;
+    const scaleChannels = channels.has(key) ? channels.get(key) : [];
+    if (ticks && ticks.length) scaleChannels.push({value: ticks});
+    if (scaleChannels.length || scaleOptions) {
       const scale = Scale(key, scaleChannels, {
         round: registry.get(key) === position ? round : undefined, // only for position
         nice,
         clamp,
         align,
         padding,
+        grid,
         ...scaleOptions
       });
       if (scale) {