diff --git a/src/marks/axis.js b/src/marks/axis.js index c7c7312d3f..28c5180d06 100644 --- 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 new file mode 100644 index 0000000000..9b60fb1f6f --- /dev/null +++ b/test/output/aaplCloseClip.svg @@ -0,0 +1,104 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + 0 + 20 + 40 + 60 + 80 + 100 + 120 + 140 + 160 + 180 + + + ↑ Close + + + + + + + + + + + + + + + + + + 4Jan + 11 + 18 + 25 + 1Feb + 8 + 15 + 22 + 1Mar + 8 + 15 + 22 + 29 + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/test/plots/aapl-close.ts b/test/plots/aapl-close.ts index f38b815fbb..21595c72a0 100644 --- 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("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("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("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("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("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("data/aapl.csv", d3.autoType); + const aapl = await d3.csv("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("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: "red"}}); + const aapl = await d3.csv("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("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "3 months"}}); + const aapl = await d3.csv("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("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({x: {grid: "month"}}); + const aapl = await d3.csv("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("data/aapl.csv", d3.autoType); - return Plot.lineY(AAPL, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}}); + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineY(aapl, {x: "Date", y: "Close"}).plot({y: {grid: [100, 120, 140]}}); } export async function aaplCloseNormalize() {