fix axis label being clipped with the clip plot option (#1804)

closes #1803
observablehq · Aug 21, 2023 · 6270261 · 6270261
1 parent 8d10146
commit 6270261
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 19 deletions.
diff --git a/src/marks/axis.js b/src/marks/axis.js
@@ -482,7 +482,18 @@ function gridDefaults({
 }
 
 function labelOptions(
-  {fill, fillOpacity, fontFamily, fontSize, fontStyle, fontWeight, monospace, pointerEvents, shapeRendering},
+  {
+    fill,
+    fillOpacity,
+    fontFamily,
+    fontSize,
+    fontStyle,
+    fontWeight,
+    monospace,
+    pointerEvents,
+    shapeRendering,
+    clip = false
+  },
   initializer
 ) {
   // Only propagate these options if constant.
@@ -501,6 +512,7 @@ function labelOptions(
     monospace,
     pointerEvents,
     shapeRendering,
+    clip,
     initializer
   };
 }

diff --git a/test/output/aaplCloseClip.svg b/test/output/aaplCloseClip.svg
diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts
@@ -2,52 +2,64 @@ import * as Plot from "@observablehq/plot";
 import * as d3 from "d3";
 
 export async function aaplClose() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
   return Plot.plot({
-    y: {
-      grid: true
-    },
+    y: {grid: true},
     marks: [
-      Plot.areaY(AAPL, {x: "Date", y: "Close", fillOpacity: 0.1}),
-      Plot.lineY(AAPL, {x: "Date", y: "Close"}),
+      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
+      Plot.lineY(aapl, {x: "Date", y: "Close"}),
       Plot.ruleY([0])
     ]
   });
 }
 
+export async function aaplCloseClip() {
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.plot({
+    clip: true,
+    x: {domain: [new Date(Date.UTC(2015, 0, 1)), new Date(Date.UTC(2015, 3, 1))]},
+    y: {grid: true},
+    marks: [
+      Plot.areaY(aapl, {x: "Date", y: "Close", fillOpacity: 0.1}),
+      Plot.lineY(aapl, {x: "Date", y: "Close"}),
+      Plot.ruleY([0], {clip: false})
+    ]
+  });
+}
+
 export async function aaplCloseDataTicks() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
   return Plot.plot({
-    marks: [Plot.axisY(d3.ticks(0, 200, 10), {anchor: "left"}), Plot.lineY(AAPL, {x: "Date", y: "Close"})]
+    marks: [Plot.axisY(d3.ticks(0, 200, 10), {anchor: "left"}), Plot.lineY(aapl, {x: "Date", y: "Close"})]
   });
 }
 
 export async function aaplCloseImplicitGrid() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
   return Plot.plot({
     y: {grid: true}, // appears even though there’s an explicit axis
-    marks: [Plot.axisY({anchor: "left"}), Plot.lineY(AAPL, {x: "Date", y: "Close"})]
+    marks: [Plot.axisY({anchor: "left"}), Plot.lineY(aapl, {x: "Date", y: "Close"})]
   });
 }
 
 export async function aaplCloseGridColor() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
-  return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: "red"}});
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: "red"}});
 }
 
 export async function aaplCloseGridInterval() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
-  return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "3 months"}});
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({x: {grid: "3 months"}});
 }
 
 export async function aaplCloseGridIntervalName() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
-  return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "month"}});
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({x: {grid: "month"}});
 }
 
 export async function aaplCloseGridIterable() {
-  const AAPL = await d3.csv<any>("data/aapl.csv", d3.autoType);
-  return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}});
+  const aapl = await d3.csv<any>("data/aapl.csv", d3.autoType);
+  return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}});
 }
 
 export async function aaplCloseNormalize() {