From 7bfa337f695d18453d92ddb6e4f0dd83b3555303 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Sun, 24 Sep 2023 09:18:14 -0700 Subject: [PATCH 1/3] tip preferredAnchor --- docs/marks/tip.md | 2 +- src/marks/tip.d.ts | 7 +++ src/marks/tip.js | 21 ++++++--- src/plot.js | 3 +- test/output/tipLineX.svg | 55 +++++++++++++++++++++++ test/output/{tipLine.svg => tipLineY.svg} | 0 test/plots/tip.ts | 7 ++- 7 files changed, 87 insertions(+), 8 deletions(-) create mode 100644 test/output/tipLineX.svg rename test/output/{tipLine.svg => tipLineY.svg} (100%) diff --git a/docs/marks/tip.md b/docs/marks/tip.md index be8cf4c4b1..ed0c89f5ff 100644 --- a/docs/marks/tip.md +++ b/docs/marks/tip.md @@ -182,7 +182,7 @@ Plot.plot({ ``` ::: -If you don’t specify an **anchor**, the tip mark will choose one automatically. It will prefer *top-left* if the tip fits; otherwise it will switch sides to try to contain the tip within the plot’s frame. When dynamically rendering the tip mark, say with the [pointer interaction](../interactions/pointer.md), the tip will also attempt to use the anchor it chose previously, making the tip more stable as you move the pointer and improving readability. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated. +If you don’t specify an explicit **anchor**, the tip mark will choose one automatically, using the **preferredAnchor** if it fits. The preferred anchor defaults to *bottom*, except when using the **tip** option and the [pointerY pointing mode](../interactions/pointer.md), in which case it defaults to *left*. In some cases, it may not be possible to fit the tip within the plot’s frame; consider setting the plot’s **style** to `overflow: visible;` to prevent the tip from being truncated. The tip mark is compatible with transforms that derive **x** and **y** dynamically from data, such as the [centroid transform](../transforms/centroid.md) which computes polygon centroids. Below, a map of the United States shows state names. We reduce the size of the tips by setting the **textPadding** option to 3 pixels instead of the default 8. diff --git a/src/marks/tip.d.ts b/src/marks/tip.d.ts index 81cac9b1e8..79f67dcc66 100644 --- a/src/marks/tip.d.ts +++ b/src/marks/tip.d.ts @@ -62,6 +62,13 @@ export interface TipOptions extends MarkOptions, TextStyles { */ anchor?: FrameAnchor; + /** + * If an explicit tip anchor is not specified, an anchor is chosen + * automatically such that the tip fits within the plot’s frame; if the + * preferred anchor fits, it is chosen. + */ + preferredAnchor?: FrameAnchor | null; + /** * How channel values are formatted for display. If a format is a string, it * is interpreted as a (UTC) time format for temporal channels, and otherwise diff --git a/src/marks/tip.js b/src/marks/tip.js index 75f06e45d1..edea248fc8 100644 --- a/src/marks/tip.js +++ b/src/marks/tip.js @@ -33,6 +33,7 @@ export class Tip extends Mark { y1, y2, anchor, + preferredAnchor = "bottom", monospace, fontFamily = monospace ? "ui-monospace, monospace" : undefined, fontSize, @@ -65,7 +66,7 @@ export class Tip extends Mark { defaults ); this.anchor = maybeAnchor(anchor, "anchor"); - this.previousAnchor = this.anchor ?? "top-left"; + this.preferredAnchor = maybeAnchor(preferredAnchor, "preferredAnchor"); this.frameAnchor = maybeFrameAnchor(frameAnchor); this.textAnchor = impliedString(textAnchor, "middle"); this.textPadding = +textPadding; @@ -208,16 +209,26 @@ export class Tip extends Mark { (w = Math.round(w)), (h = Math.round(h)); // crisp edges let a = anchor; // use the specified anchor, if any if (a === undefined) { - a = mark.previousAnchor; // favor the previous anchor, if it fits const x = px(i) + ox; const y = py(i) + oy; const fitLeft = x + w + r * 2 < width; const fitRight = x - w - r * 2 > 0; const fitTop = y + h + m + r * 2 + 7 < height; const fitBottom = y - h - m - r * 2 > 0; - const ax = (/-left$/.test(a) ? fitLeft || !fitRight : fitLeft && !fitRight) ? "left" : "right"; - const ay = (/^top-/.test(a) ? fitTop || !fitBottom : fitTop && !fitBottom) ? "top" : "bottom"; - a = mark.previousAnchor = `${ay}-${ax}`; + a = + fitLeft && fitRight + ? fitTop && fitBottom + ? mark.preferredAnchor + : fitBottom + ? "bottom" + : "top" + : fitTop && fitBottom + ? fitLeft + ? "left" + : "right" + : (fitLeft || fitRight) && (fitTop || fitBottom) + ? `${fitBottom ? "bottom" : "top"}-${fitLeft ? "left" : "right"}` + : mark.preferredAnchor; } const path = this.firstChild; // note: assumes exactly two children! const text = this.lastChild; // note: assumes exactly two children! diff --git a/src/plot.js b/src/plot.js index 039a269ada..32824f3153 100644 --- a/src/plot.js +++ b/src/plot.js @@ -527,10 +527,11 @@ function inferTips(marks) { if (tipOptions) { if (tipOptions === true) tipOptions = {}; else if (typeof tipOptions === "string") tipOptions = {pointer: tipOptions}; - let {pointer: p} = tipOptions; + let {pointer: p, preferredAnchor: a} = tipOptions; p = /^x$/i.test(p) ? pointerX : /^y$/i.test(p) ? pointerY : pointer; // TODO validate? tipOptions = p(derive(mark, tipOptions)); tipOptions.title = null; // prevent implicit title for primitive data + if (a === undefined) tipOptions.preferredAnchor = p === pointerY ? "left" : "bottom"; const t = tip(mark.data, tipOptions); t.facet = mark.facet; // inherit facet settings t.facetAnchor = mark.facetAnchor; // inherit facet settings diff --git a/test/output/tipLineX.svg b/test/output/tipLineX.svg new file mode 100644 index 0000000000..9db6df7f4b --- /dev/null +++ b/test/output/tipLineX.svg @@ -0,0 +1,55 @@ + + + + + + + + + + + 2014 + 2015 + 2016 + 2017 + 2018 + + + + + + + + + + + + 60 + 80 + 100 + 120 + 140 + 160 + 180 + + + Close → + + + + + + \ No newline at end of file diff --git a/test/output/tipLine.svg b/test/output/tipLineY.svg similarity index 100% rename from test/output/tipLine.svg rename to test/output/tipLineY.svg diff --git a/test/plots/tip.ts b/test/plots/tip.ts index 41bcaf5105..bd7103545a 100644 --- a/test/plots/tip.ts +++ b/test/plots/tip.ts @@ -171,7 +171,12 @@ export async function tipHexbinExplicit() { }); } -export async function tipLine() { +export async function tipLineX() { + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.lineX(aapl, {y: "Date", x: "Close", tip: true}).plot(); +} + +export async function tipLineY() { const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot(); } From 354db2b29548d9d63d2b2179468e255e62b28630 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 29 Sep 2023 11:51:53 +0200 Subject: [PATCH 2/3] document tip options --- src/marks/tip.d.ts | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/src/marks/tip.d.ts b/src/marks/tip.d.ts index 79f67dcc66..197ba4b96f 100644 --- a/src/marks/tip.d.ts +++ b/src/marks/tip.d.ts @@ -75,6 +75,21 @@ export interface TipOptions extends MarkOptions, TextStyles { * a number format. */ format?: {[name in ChannelName]?: boolean | string | ((d: any, i: number) => string)}; + + /** + * The image filter for the tip’s box; defaults to a drop shadow. + */ + pathFilter?: string; + + /** + * The size of the tip’s pointer in pixels; defaults to 12. + */ + pointerSize?: number; + + /** + * The padding around the text in pixels; defaults to 8. + */ + textPadding?: number; } /** From cc42c4079c0fb85210296124cfe6a61aab42e9f0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philippe=20Rivi=C3=A8re?= Date: Fri, 29 Sep 2023 11:52:33 +0200 Subject: [PATCH 3/3] =?UTF-8?q?factor=20in=20the=20tip=E2=80=99s=20pointer?= =?UTF-8?q?=20width=20when=20checking=20if=20a=20tip=20fits?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit closes #1876 --- src/marks/tip.js | 4 +-- test/output/tipLineXVisible.svg | 60 +++++++++++++++++++++++++++++++++ test/plots/tip.ts | 15 +++++++++ 3 files changed, 77 insertions(+), 2 deletions(-) create mode 100644 test/output/tipLineXVisible.svg diff --git a/src/marks/tip.js b/src/marks/tip.js index edea248fc8..e603d93d33 100644 --- a/src/marks/tip.js +++ b/src/marks/tip.js @@ -211,8 +211,8 @@ export class Tip extends Mark { if (a === undefined) { const x = px(i) + ox; const y = py(i) + oy; - const fitLeft = x + w + r * 2 < width; - const fitRight = x - w - r * 2 > 0; + const fitLeft = x + w + r * 2 + m < width; + const fitRight = x - w - r * 2 - m > 0; const fitTop = y + h + m + r * 2 + 7 < height; const fitBottom = y - h - m - r * 2 > 0; a = diff --git a/test/output/tipLineXVisible.svg b/test/output/tipLineXVisible.svg new file mode 100644 index 0000000000..172e352d5d --- /dev/null +++ b/test/output/tipLineXVisible.svg @@ -0,0 +1,60 @@ + + + + + + + + + + + 2014 + 2015 + 2016 + 2017 + 2018 + + + + + + + + + + + + 60 + 80 + 100 + 120 + 140 + 160 + 180 + + + Close → + + + + + + + + ​Close 171.85​Date 2017-11-30 + + + \ No newline at end of file diff --git a/test/plots/tip.ts b/test/plots/tip.ts index bd7103545a..289d9a2c48 100644 --- a/test/plots/tip.ts +++ b/test/plots/tip.ts @@ -176,6 +176,21 @@ export async function tipLineX() { return Plot.lineX(aapl, {y: "Date", x: "Close", tip: true}).plot(); } +export async function tipLineXVisible() { + const aapl = await d3.csv("data/aapl.csv", d3.autoType); + return Plot.plot({ + marks: [ + Plot.lineX(aapl, {y: "Date", x: "Close"}), + Plot.tip(aapl, { + filter: (d) => d.Date.toISOString() === "2017-11-30T00:00:00.000Z", + y: "Date", + x: "Close", + preferredAnchor: "left" + }) + ] + }); +} + export async function tipLineY() { const aapl = await d3.csv("data/aapl.csv", d3.autoType); return Plot.lineY(aapl, {x: "Date", y: "Close", tip: true}).plot();