replace axis line with frame anchor (#1241)

* replace axis line with frame anchor

* remove explicit axis line option

Author: mbostock

src/marks/axis.js

@@ -1,12 +1,11 @@
 import {extent, format, utcFormat} from "d3";
-import {create} from "../context.js";
 import {formatDefault} from "../format.js";
-import {Mark, marks} from "../mark.js";
+import {marks} from "../mark.js";
 import {radians} from "../math.js";
 import {range, valueof, arrayify, constant, keyword, identity, number} from "../options.js";
-import {isNone, isNoneish, isIterable, isTemporal, maybeInterval, orderof} from "../options.js";
+import {isNoneish, isIterable, isTemporal, maybeInterval, orderof} from "../options.js";
 import {isTemporalScale} from "../scales.js";
-import {applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
+import {offset} from "../style.js";
 import {initializer} from "../transforms/basic.js";
 import {ruleX, ruleY} from "./rule.js";
 import {text, textX, textY} from "./text.js";
@@ -64,7 +63,6 @@ function axisKy(
   anchor,
   data,
   {
-    line,
     color = "currentColor",
     opacity = 1,
     stroke = color,
@@ -95,14 +93,6 @@ function axisKy(
   tickRotate = number(tickRotate);
   if (labelAnchor !== undefined) labelAnchor = keyword(labelAnchor, "labelAnchor", ["center", "top", "bottom"]);
   return marks(
-    k === "y" && line && !isNone(line)
-      ? new AxisLine(k, anchor, {
-          stroke: line === true ? stroke : line,
-          strokeOpacity,
-          strokeWidth,
-          ...options
-        })
-      : null,
     tickSize && !isNoneish(stroke)
       ? axisTickKy(k, anchor, data, {
           stroke,
@@ -180,7 +170,6 @@ function axisKx(
   anchor,
   data,
   {
-    line,
     color = "currentColor",
     opacity = 1,
     stroke = color,
@@ -211,14 +200,6 @@ function axisKx(
   tickRotate = number(tickRotate);
   if (labelAnchor !== undefined) labelAnchor = keyword(labelAnchor, "labelAnchor", ["center", "left", "right"]);
   return marks(
-    k === "x" && line && !isNone(line)
-      ? new AxisLine(k, anchor, {
-          stroke: line === true ? stroke : line,
-          strokeOpacity,
-          strokeWidth,
-          ...options
-        })
-      : null,
     tickSize && !isNoneish(stroke)
       ? axisTickKx(k, anchor, data, {
           stroke,
@@ -572,34 +553,6 @@ function axisMark(mark, k, ariaLabel, data, options, initialize) {
   return m;
 }
 
-const axisLineDefaults = {
-  fill: null,
-  stroke: "currentColor"
-};
-
-class AxisLine extends Mark {
-  constructor(k, anchor, {facetAnchor = anchor + "-empty", ...options} = {}) {
-    super(undefined, undefined, {facetAnchor, ...options}, axisLineDefaults);
-    this.anchor = anchor;
-    this.ariaLabel = `${k}-axis line`;
-  }
-  render(index, scales, channels, dimensions, context) {
-    const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
-    const {anchor} = this;
-    const tx = anchor === "left" ? -0.5 : anchor === "right" ? 0.5 : undefined;
-    const ty = anchor === "top" ? -0.5 : anchor === "bottom" ? 0.5 : undefined;
-    return create("svg:line", context)
-      .call(applyIndirectStyles, this, dimensions, context)
-      .call(applyDirectStyles, this)
-      .call(applyTransform, this, {}, tx, ty)
-      .attr("x1", anchor === "right" ? width - marginRight : marginLeft)
-      .attr("y1", anchor === "bottom" ? height - marginBottom : marginTop)
-      .attr("x2", anchor === "left" ? marginLeft : width - marginRight)
-      .attr("y2", anchor === "top" ? marginTop : height - marginBottom)
-      .node();
-  }
-}
-
 function inferTextChannel(scale, ticks, tickFormat) {
   return {value: inferTickFormat(scale, ticks, tickFormat)};
 }

src/marks/frame.js

@@ -1,6 +1,6 @@
 import {create} from "../context.js";
 import {Mark} from "../mark.js";
-import {number} from "../options.js";
+import {maybeKeyword, number} from "../options.js";
 import {applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
 
 const defaults = {
@@ -9,10 +9,27 @@ const defaults = {
   stroke: "currentColor"
 };
 
+const lineDefaults = {
+  ariaLabel: "frame",
+  fill: null,
+  stroke: "currentColor",
+  strokeLinecap: "square"
+};
+
 export class Frame extends Mark {
   constructor(options = {}) {
-    const {inset = 0, insetTop = inset, insetRight = inset, insetBottom = inset, insetLeft = inset, rx, ry} = options;
-    super(undefined, undefined, options, defaults);
+    const {
+      anchor = null,
+      inset = 0,
+      insetTop = inset,
+      insetRight = inset,
+      insetBottom = inset,
+      insetLeft = inset,
+      rx,
+      ry
+    } = options;
+    super(undefined, undefined, options, anchor == null ? defaults : lineDefaults);
+    this.anchor = maybeKeyword(anchor, "anchor", ["top", "right", "bottom", "left"]);
     this.insetTop = number(insetTop);
     this.insetRight = number(insetRight);
     this.insetBottom = number(insetBottom);
@@ -22,17 +39,33 @@ export class Frame extends Mark {
   }
   render(index, scales, channels, dimensions, context) {
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
-    const {insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
-    return create("svg:rect", context)
+    const {anchor, insetTop, insetRight, insetBottom, insetLeft, rx, ry} = this;
+    const x1 = marginLeft + insetLeft;
+    const x2 = width - marginRight - insetRight;
+    const y1 = marginTop + insetTop;
+    const y2 = height - marginBottom - insetBottom;
+    return create(anchor ? "svg:line" : "svg:rect", context)
       .call(applyIndirectStyles, this, dimensions, context)
       .call(applyDirectStyles, this)
       .call(applyTransform, this, {})
-      .attr("x", marginLeft + insetLeft)
-      .attr("y", marginTop + insetTop)
-      .attr("width", width - marginLeft - marginRight - insetLeft - insetRight)
-      .attr("height", height - marginTop - marginBottom - insetTop - insetBottom)
-      .attr("rx", rx)
-      .attr("ry", ry)
+      .call(
+        anchor === "left"
+          ? (line) => line.attr("x1", x1).attr("x2", x1).attr("y1", y1).attr("y2", y2)
+          : anchor === "right"
+          ? (line) => line.attr("x1", x2).attr("x2", x2).attr("y1", y1).attr("y2", y2)
+          : anchor === "top"
+          ? (line) => line.attr("x1", x1).attr("x2", x2).attr("y1", y1).attr("y2", y1)
+          : anchor === "bottom"
+          ? (line) => line.attr("x1", x1).attr("x2", x2).attr("y1", y2).attr("y2", y2)
+          : (rect) =>
+              rect
+                .attr("x", x1)
+                .attr("y", y1)
+                .attr("width", x2 - x1)
+                .attr("height", y2 - y1)
+                .attr("rx", rx)
+                .attr("ry", ry)
+      )
       .node();
   }
 }

src/plot.js

@@ -6,6 +6,7 @@ import {Facets, facetExclude, facetGroups, facetOrder, facetTranslate, facetFilt
 import {Legends, exposeLegends} from "./legends.js";
 import {Mark} from "./mark.js";
 import {axisFx, axisFy, axisX, axisY, gridFx, gridFy, gridX, gridY} from "./marks/axis.js";
+import {frame} from "./marks/frame.js";
 import {arrayify, isColor, isIterable, isNone, isScaleOptions, map, yes, maybeInterval} from "./options.js";
 import {Scales, ScaleFunctions, autoScaleRange, exposeScales, innerDimensions, outerDimensions} from "./scales.js";
 import {position, registry as scaleRegistry} from "./scales/index.js";
@@ -513,6 +514,8 @@ function maybeAxis(axes, axis, axisType, primary, secondary, defaults, options)
   if (!axis) return;
   const both = isBoth(axis);
   options = axisOptions(both ? primary : axis, defaults, options);
+  const {line} = options;
+  if ((axisType === axisY || axisType === axisX) && line && !isNone(line)) axes.push(frame(lineOptions(options)));
   axes.push(axisType(options));
   if (both) axes.push(axisType({...options, anchor: secondary, label: null}));
 }
@@ -563,6 +566,11 @@ function axisOptions(
   };
 }
 
+function lineOptions(options) {
+  const {anchor, line} = options;
+  return {anchor, facetAnchor: anchor + "-empty", stroke: line === true ? undefined : line};
+}
+
 function gridOptions(
   grid,
   {

test/output/athletesSportWeight.svg

@@ -6,8 +6,10 @@ export default async function () {
   return Plot.plot({
     marginLeft: 100,
     grid: true,
-    x: {line: true},
     color: {scheme: "YlGnBu", zero: true},
-    marks: [Plot.barX(athletes, Plot.binX({fill: "proportion-facet"}, {x: "weight", fy: "sport", thresholds: 60}))]
+    marks: [
+      Plot.barX(athletes, Plot.binX({fill: "proportion-facet"}, {x: "weight", fy: "sport", thresholds: 60})),
+      Plot.frame({anchor: "bottom", facetAnchor: "bottom"})
+    ]
   });
 }