frame

Author: mbostock

src/index.js

@@ -5,6 +5,7 @@ export {BarX, BarY, barX, barY} from "./marks/bar.js";
 export {bin, binX, binY} from "./marks/bin.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
 export {Dot, dot, dotX, dotY} from "./marks/dot.js";
+export {Frame, frame} from "./marks/frame.js";
 export {group, groupX, groupY} from "./marks/group.js";
 export {Line, line, lineX, lineY} from "./marks/line.js";
 export {Link, link} from "./marks/link.js";

src/marks/frame.js

@@ -0,0 +1,33 @@
+import {create} from "d3-selection";
+import {Mark} from "../mark.js";
+import {Style, applyDirectStyles, applyIndirectStyles} from "../style.js";
+
+export class Frame extends Mark {
+  constructor({
+    fill = "none",
+    stroke = "currentColor",
+    ...style
+  } = {}) {
+    super();
+    Style(this, {fill, stroke, ...style});
+  }
+  render(
+    index,
+    scales,
+    channels,
+    {marginTop, marginRight, marginBottom, marginLeft, width, height}
+  ) {
+    return create("svg:rect")
+        .call(applyIndirectStyles, this)
+        .call(applyDirectStyles, this)
+        .attr("x", marginLeft)
+        .attr("y", marginTop)
+        .attr("width", width - marginLeft - marginRight)
+        .attr("height", height - marginTop - marginBottom)
+      .node();
+  }
+}
+
+export function frame(options) {
+  return new Frame(options);
+}

test/plots/penguin-culmen.js

@@ -13,6 +13,7 @@ export default async function() {
       marginRight: 80
     },
     marks: [
+      Plot.frame(),
       Plot.dot(data.slice(), {
         x: "culmen_depth_mm",
         y: "culmen_length_mm",