Fil/grid

README.md

@@ -292,7 +292,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** - to format tick values, either a function or format specifier string; see [Formats](#formats)
 * *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, draw grid lines across the plot for each tick; specify a number or an array of tick values to generate different ticks; see [grid marks](#grid) for more options
 * *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*
@@ -1105,6 +1105,38 @@ Equivalent to [Plot.dot](#plotdotdata-options) except that the **symbol** option
 
 Equivalent to [Plot.dot](#plotdotdata-options) except that the **symbol** option is set to *hexagon*.
 
+### Grid
+
+The grid mark draw a line for each tick of the *x* or *y* axis. Specify a number to generate new ticks from the scale, or an explicit array of tick values. The [standard mark options](#marks) can be specified as a constant, or a function of the tick value and tick index, with a *stroke* which defaults to currentColor, and a *strokeOpacity* which defaults to 0.1. If the ticks are specified as an array of tick values, they will be considered as a channel when building the default domain. 
+
+#### Plot.gridX([*options*])
+
+```js
+Plot.gridX([3, 4, 5], {stroke: "red"})
+```
+
+Returns a new grid along the *x* axis with the given *options*. The *ticks* option can be specified as the first argument.
+
+In addition to the [standard mark options](#marks), the following optional channels are supported:
+
+* **insetTop** - insets the top edge
+* **insetBottom** - insets the bottom edge
+* **inset** - shorthand for insetTop and insetBottom
+
+#### Plot.gridY([*options*])
+
+```js
+Plot.gridY([3, 4, 5], {stroke: "red"})
+```
+
+Returns a new grid along the *y* axis with the given *options*. The *ticks* option can be specified as the first argument.
+
+In addition to the [standard mark options](#marks), the following optional channels are supported:
+
+* **insetLeft** - insets the left edge
+* **insetRight** - insets the right edge
+* **inset** - shorthand for insetLeft and insetRight
+
 ### Hexgrid
 
 The hexgrid mark can be used to support marks using the [hexbin](#hexbin) layout.

src/axes.js

@@ -59,14 +59,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());
@@ -76,9 +76,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/axis.js

@@ -2,7 +2,7 @@ import {axisTop, axisBottom, axisRight, axisLeft, format, utcFormat} from "d3";
 import {create} from "./context.js";
 import {formatIsoDate} from "./format.js";
 import {radians} from "./math.js";
-import {boolean, take, number, string, keyword, maybeKeyword, constant, isTemporal} from "./options.js";
+import {boolean, number, string, keyword, maybeKeyword, constant, isTemporal} from "./options.js";
 import {applyAttr, impliedString} from "./style.js";
 
 export class AxisX {
@@ -14,7 +14,6 @@ export class AxisX {
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
     fontVariant,
-    grid,
     label,
     labelAnchor,
     labelOffset,
@@ -30,7 +29,6 @@ export class AxisX {
     this.tickPadding = number(tickPadding);
     this.tickFormat = maybeTickFormat(tickFormat);
     this.fontVariant = impliedString(fontVariant, "normal");
-    this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
     this.labelOffset = number(labelOffset);
@@ -41,7 +39,7 @@ export class AxisX {
   }
   render(
     index,
-    {[this.name]: x, fy},
+    {[this.name]: x},
     {
       width,
       height,
@@ -57,7 +55,7 @@ export class AxisX {
     },
     context
   ) {
-    const {axis, fontVariant, grid, label, labelAnchor, labelOffset, line, name, tickRotate} = this;
+    const {axis, fontVariant, label, labelAnchor, labelOffset, line, name, tickRotate} = this;
     const offset = name === "x" ? 0 : axis === "top" ? marginTop - facetMarginTop : marginBottom - facetMarginBottom;
     const offsetSign = axis === "top" ? -1 : 1;
     const ty = offsetSign * offset + (axis === "top" ? marginTop : height - marginBottom);
@@ -70,9 +68,6 @@ export class AxisX {
       .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
           ? () => {}
@@ -107,7 +102,6 @@ export class AxisY {
     tickPadding = tickSize === 0 ? 9 : 3,
     tickFormat,
     fontVariant,
-    grid,
     label,
     labelAnchor,
     labelOffset,
@@ -123,7 +117,6 @@ export class AxisY {
     this.tickPadding = number(tickPadding);
     this.tickFormat = maybeTickFormat(tickFormat);
     this.fontVariant = impliedString(fontVariant, "normal");
-    this.grid = boolean(grid);
     this.label = string(label);
     this.labelAnchor = maybeKeyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
     this.labelOffset = number(labelOffset);
@@ -134,11 +127,11 @@ export class AxisY {
   }
   render(
     index,
-    {[this.name]: y, fx},
+    {[this.name]: y},
     {width, height, marginTop, marginRight, marginBottom, marginLeft, offsetTop = 0, facetMarginLeft, facetMarginRight},
     context
   ) {
-    const {axis, fontVariant, grid, label, labelAnchor, labelOffset, line, name, tickRotate} = this;
+    const {axis, fontVariant, label, labelAnchor, labelOffset, line, name, tickRotate} = this;
     const offset = name === "y" ? 0 : axis === "left" ? marginLeft - facetMarginLeft : marginRight - facetMarginRight;
     const offsetSign = axis === "left" ? -1 : 1;
     const tx = offsetSign * offset + (axis === "right" ? width - marginRight : marginLeft);
@@ -151,7 +144,6 @@ export class AxisY {
       .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
           ? () => {}
@@ -192,38 +184,6 @@ function applyAria(selection, {name, label, ariaLabel = `${name}-axis`, ariaDesc
   applyAttr(selection, "aria-description", ariaDescription);
 }
 
-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(""));
-}
-
 function maybeTicks(ticks) {
   return ticks === null ? [] : ticks;
 }

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

@@ -1,4 +1,4 @@
-export {plot, Mark, marks} from "./plot.js";
+export {plot, Mark, marks, Grid} from "./plot.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {Arrow, arrow} from "./marks/arrow.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.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, 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,21 @@
+import {isOptions} from "../options.js";
+import {Grid} from "../plot.js";
+
+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);
+}