tip title (#1539)

Author: mbostock

src/mark.d.ts

@@ -264,8 +264,10 @@ export interface MarkOptions {
   pointerEvents?: string;
 
   /**
-   * The [title][1]; a channel specifying accessible, short textual descriptions
-   * as strings (possibly with newlines).
+   * The title; a channel specifying accessible, short textual descriptions as
+   * strings (possibly with newlines). If the tip option is specified, the title
+   * will be displayed with an interactive tooltip instead of using the SVG
+   * [title element][1].
    *
    * [1]: https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title
    */

src/marks/text.js

@@ -119,7 +119,7 @@ export class Text extends Mark {
   }
 }
 
-function maybeTextOverflow(textOverflow) {
+export function maybeTextOverflow(textOverflow) {
   return textOverflow == null
     ? null
     : keyword(textOverflow, "textOverflow", [
@@ -410,14 +410,14 @@ export function monospaceWidth(text, start = 0, end = text.length) {
   return sum;
 }
 
-function splitter({monospace, lineWidth, textOverflow}) {
+export function splitter({monospace, lineWidth, textOverflow}) {
   if (textOverflow != null || lineWidth == Infinity) return (text) => text.split(/\r\n?|\n/g);
   const widthof = monospace ? monospaceWidth : defaultWidth;
   const maxWidth = lineWidth * 100;
   return (text) => lineWrap(text, maxWidth, widthof);
 }
 
-function clipper({monospace, lineWidth, textOverflow}) {
+export function clipper({monospace, lineWidth, textOverflow}) {
   if (textOverflow == null || lineWidth == Infinity) return (text) => text;
   const widthof = monospace ? monospaceWidth : defaultWidth;
   const maxWidth = lineWidth * 100;

src/marks/tip.js

@@ -7,7 +7,8 @@ import {Mark} from "../mark.js";
 import {maybeAnchor, maybeFrameAnchor, maybeTuple, number, string} from "../options.js";
 import {applyDirectStyles, applyFrameAnchor, applyIndirectStyles, applyTransform, impliedString} from "../style.js";
 import {inferTickFormat} from "./axis.js";
-import {applyIndirectTextStyles, cut, defaultWidth, ellipsis, monospaceWidth} from "./text.js";
+import {applyIndirectTextStyles, defaultWidth, ellipsis, monospaceWidth} from "./text.js";
+import {cut, clipper, splitter, maybeTextOverflow} from "./text.js";
 
 const defaults = {
   ariaLabel: "tip",
@@ -16,7 +17,7 @@ const defaults = {
 };
 
 // These channels are not displayed in the tip; TODO allow customization.
-const ignoreChannels = new Set(["geometry", "title", "href", "src", "ariaLabel"]);
+const ignoreChannels = new Set(["geometry", "href", "src", "ariaLabel"]);
 
 export class Tip extends Mark {
   constructor(data, options = {}) {
@@ -38,6 +39,7 @@ export class Tip extends Mark {
       lineWidth = 20,
       frameAnchor,
       textAnchor = "start",
+      textOverflow,
       textPadding = 8,
       pointerSize = 12,
       pathFilter = "drop-shadow(0 3px 4px rgba(0,0,0,0.2))"
@@ -64,13 +66,16 @@ export class Tip extends Mark {
     this.pathFilter = string(pathFilter);
     this.lineHeight = +lineHeight;
     this.lineWidth = +lineWidth;
+    this.textOverflow = maybeTextOverflow(textOverflow);
     this.monospace = !!monospace;
     this.fontFamily = string(fontFamily);
     this.fontSize = number(fontSize);
     this.fontStyle = string(fontStyle);
     this.fontVariant = string(fontVariant);
     this.fontWeight = string(fontWeight);
     for (const key in defaults) if (key in this.channels) this[key] = defaults[key]; // apply default even if channel
+    this.splitLines = splitter(this);
+    this.clipLine = clipper(this);
   }
   render(index, scales, channels, dimensions, context) {
     const mark = this;
@@ -106,6 +111,13 @@ export class Tip extends Mark {
     const formatFy = fy && inferTickFormat(fy);
 
     function* format(sources, i) {
+      if ("title" in sources) {
+        const text = sources.title.value[i];
+        for (const line of mark.splitLines(formatDefault(text))) {
+          yield ["", mark.clipLine(line)];
+        }
+        return;
+      }
       for (const key in sources) {
         if (key === "x1" && "x2" in sources) continue;
         if (key === "y1" && "y2" in sources) continue;

src/style.js

@@ -182,7 +182,7 @@ export function applyTextGroup(selection, T) {
 
 export function applyChannelStyles(
   selection,
-  {target},
+  {target, tip},
   {
     ariaLabel: AL,
     title: T,
@@ -203,12 +203,12 @@ export function applyChannelStyles(
   if (SW) applyAttr(selection, "stroke-width", (i) => SW[i]);
   if (O) applyAttr(selection, "opacity", (i) => O[i]);
   if (H) applyHref(selection, (i) => H[i], target);
-  applyTitle(selection, T);
+  if (!tip) applyTitle(selection, T);
 }
 
 export function applyGroupedChannelStyles(
   selection,
-  {target},
+  {target, tip},
   {
     ariaLabel: AL,
     title: T,
@@ -229,21 +229,24 @@ export function applyGroupedChannelStyles(
   if (SW) applyAttr(selection, "stroke-width", ([i]) => SW[i]);
   if (O) applyAttr(selection, "opacity", ([i]) => O[i]);
   if (H) applyHref(selection, ([i]) => H[i], target);
-  applyTitleGroup(selection, T);
+  if (!tip) applyTitleGroup(selection, T);
 }
 
-function groupAesthetics({
-  ariaLabel: AL,
-  title: T,
-  fill: F,
-  fillOpacity: FO,
-  stroke: S,
-  strokeOpacity: SO,
-  strokeWidth: SW,
-  opacity: O,
-  href: H
-}) {
-  return [AL, T, F, FO, S, SO, SW, O, H].filter((c) => c !== undefined);
+function groupAesthetics(
+  {
+    ariaLabel: AL,
+    title: T,
+    fill: F,
+    fillOpacity: FO,
+    stroke: S,
+    strokeOpacity: SO,
+    strokeWidth: SW,
+    opacity: O,
+    href: H
+  },
+  {tip}
+) {
+  return [AL, tip ? undefined : T, F, FO, S, SO, SW, O, H].filter((c) => c !== undefined);
 }
 
 export function groupZ(I, Z, z) {
@@ -256,9 +259,10 @@ export function groupZ(I, Z, z) {
   return G.values();
 }
 
-export function* groupIndex(I, position, {z}, channels) {
+export function* groupIndex(I, position, mark, channels) {
+  const {z} = mark;
   const {z: Z} = channels; // group channel
-  const A = groupAesthetics(channels); // aesthetic channels
+  const A = groupAesthetics(channels, mark); // aesthetic channels
   const C = [...position, ...A]; // all channels
 
   // Group the current index by Z (if any).