href channel (#645)

* href channel * apply href and target to the line and area marks document * Update README * test plot for href (#647) * cheeky test plot for href * tweak test; add snapshot Co-authored-by: Mike Bostock <[email protected]> Co-authored-by: Philippe Rivière <[email protected]>
observablehq · Jan 2, 2022 · 9c84cdd · 9c84cdd
1 parent eb09fb7
commit 9c84cdd
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 25 deletions.
diff --git a/README.md b/README.md
@@ -611,6 +611,7 @@ All marks support the following style options:
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)
 * **dx** - horizontal offset (in pixels; defaults to 0)
 * **dy** - vertical offset (in pixels; defaults to 0)
+* **target** - link target (e.g., “_blank” for a new window); for use with the **href** channel
 
 For all marks except [text](#plottextdata-options), the **dx** and **dy** options are rendered as a transform property, possibly including a 0.5px offset on low-density screens.
 
@@ -623,6 +624,7 @@ All marks support the following optional channels:
 * **strokeWidth** - a stroke width (in pixels)
 * **opacity** - an object opacity; bound to the *opacity* scale
 * **title** - a tooltip (a string of text, possibly with newlines)
+* **href** - a URL to link to
 
 The **fill**, **fillOpacity**, **stroke**, **strokeWidth**, **strokeOpacity**, and **opacity** options can be specified as either channels or constants. When the fill or stroke is specified as a function or array, it is interpreted as a channel; when the fill or stroke is specified as a string, it is interpreted as a constant if a valid CSS color and otherwise it is interpreted as a column name for a channel. Similarly when the fill opacity, stroke opacity, object opacity, stroke width, or radius is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
 

diff --git a/src/marks/area.js b/src/marks/area.js
@@ -38,7 +38,7 @@ export class Area extends Mark {
           .data(Z ? group(I, i => Z[i]).values() : [I])
           .join("path")
             .call(applyDirectStyles, this)
-            .call(applyGroupedChannelStyles, channels)
+            .call(applyGroupedChannelStyles, this, channels)
             .attr("d", shapeArea()
               .curve(this.curve)
               .defined(i => defined(X1[i]) && defined(Y1[i]) && defined(X2[i]) && defined(Y2[i]))

diff --git a/src/marks/bar.js b/src/marks/bar.js
@@ -36,7 +36,7 @@ export class AbstractBar extends Mark {
             .attr("height", this._height(scales, channels, dimensions))
             .call(applyAttr, "rx", rx)
             .call(applyAttr, "ry", ry)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
   _x(scales, {x: X}, {marginLeft}) {

diff --git a/src/marks/dot.js b/src/marks/dot.js
@@ -45,7 +45,7 @@ export class Dot extends Mark {
             .attr("cx", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
             .attr("cy", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .attr("r", R ? i => R[i] : this.r)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/image.js b/src/marks/image.js
@@ -83,7 +83,7 @@ export class Image extends Mark {
             .call(applyAttr, "href", S ? i => S[i] : this.src)
             .call(applyAttr, "preserveAspectRatio", this.preserveAspectRatio)
             .call(applyAttr, "crossorigin", this.crossOrigin)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/line.js b/src/marks/line.js
@@ -36,7 +36,7 @@ export class Line extends Mark {
           .data(Z ? group(I, i => Z[i]).values() : [I])
           .join("path")
             .call(applyDirectStyles, this)
-            .call(applyGroupedChannelStyles, channels)
+            .call(applyGroupedChannelStyles, this, channels)
             .attr("d", shapeLine()
               .curve(this.curve)
               .defined(i => defined(X[i]) && defined(Y[i]))

diff --git a/src/marks/link.js b/src/marks/link.js
@@ -46,7 +46,7 @@ export class Link extends Mark {
               c.lineEnd();
               return `${p}`;
             })
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/rect.js b/src/marks/rect.js
@@ -60,7 +60,7 @@ export class Rect extends Mark {
             .attr("height", Y1 && Y2 && !isCollapsed(y) ? i => Math.max(0, Math.abs(Y1[i] - Y2[i]) - insetTop - insetBottom) : height - marginTop - marginBottom - insetTop - insetBottom)
             .call(applyAttr, "rx", rx)
             .call(applyAttr, "ry", ry)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/rule.js b/src/marks/rule.js
@@ -49,7 +49,7 @@ export class RuleX extends Mark {
             .attr("x2", X ? i => X[i] : (marginLeft + width - marginRight) / 2)
             .attr("y1", Y1 && !isCollapsed(y) ? i => Y1[i] + insetTop : marginTop + insetTop)
             .attr("y2", Y2 && !isCollapsed(y) ? (y.bandwidth ? i => Y2[i] + y.bandwidth() - insetBottom : i => Y2[i] - insetBottom) : height - marginBottom - insetBottom)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }
@@ -93,7 +93,7 @@ export class RuleY extends Mark {
             .attr("x2", X2 && !isCollapsed(x) ? (x.bandwidth ? i => X2[i] + x.bandwidth() - insetRight : i => X2[i] - insetRight) : width - marginRight - insetRight)
             .attr("y1", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
             .attr("y2", Y ? i => Y[i] : (marginTop + height - marginBottom) / 2)
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/text.js b/src/marks/text.js
@@ -72,7 +72,7 @@ export class Text extends Mark {
               : text => text.attr("x", X ? i => X[i] : cx).attr("y", Y ? i => Y[i] : cy))
             .call(applyAttr, "font-size", FS && (i => FS[i]))
             .text(i => T[i])
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/marks/tick.js b/src/marks/tick.js
@@ -27,7 +27,7 @@ class AbstractTick extends Mark {
             .attr("x2", this._x2(scales, channels, dimensions))
             .attr("y1", this._y1(scales, channels, dimensions))
             .attr("y2", this._y2(scales, channels, dimensions))
-            .call(applyChannelStyles, channels))
+            .call(applyChannelStyles, this, channels))
       .node();
   }
 }

diff --git a/src/style.js b/src/style.js
@@ -1,3 +1,4 @@
+import {namespaces} from "d3";
 import {string, number, maybeColor, maybeNumber, title, titleGroup} from "./mark.js";
 import {filter} from "./defined.js";
 
@@ -7,6 +8,8 @@ export function styles(
   mark,
   {
     title,
+    href,
+    target,
     fill,
     fillOpacity,
     stroke,
@@ -87,13 +90,15 @@ export function styles(
     mark.strokeDasharray = string(strokeDasharray);
   }
 
+  mark.target = string(target);
   mark.opacity = impliedNumber(copacity, 1);
   mark.mixBlendMode = impliedString(mixBlendMode, "normal");
   mark.shapeRendering = impliedString(shapeRendering, "auto");
 
   return [
     ...channels,
     {name: "title", value: title, optional: true},
+    {name: "href", value: href, optional: true},
     {name: "fill", value: vfill, scale: "color", optional: true},
     {name: "fillOpacity", value: vfillOpacity, scale: "opacity", optional: true},
     {name: "stroke", value: vstroke, scale: "color", optional: true},
@@ -103,23 +108,25 @@ export function styles(
   ];
 }
 
-export function applyChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O}) {
-  applyAttr(selection, "fill", F && (i => F[i]));
-  applyAttr(selection, "fill-opacity", FO && (i => FO[i]));
-  applyAttr(selection, "stroke", S && (i => S[i]));
-  applyAttr(selection, "stroke-opacity", SO && (i => SO[i]));
-  applyAttr(selection, "stroke-width", SW && (i => SW[i]));
-  applyAttr(selection, "opacity", O && (i => O[i]));
+export function applyChannelStyles(selection, {target}, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+  if (F) applyAttr(selection, "fill", i => F[i]);
+  if (FO) applyAttr(selection, "fill-opacity", i => FO[i]);
+  if (S) applyAttr(selection, "stroke", i => S[i]);
+  if (SO) applyAttr(selection, "stroke-opacity", i => SO[i]);
+  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);
   title(L)(selection);
 }
 
-export function applyGroupedChannelStyles(selection, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O}) {
-  applyAttr(selection, "fill", F && (([i]) => F[i]));
-  applyAttr(selection, "fill-opacity", FO && (([i]) => FO[i]));
-  applyAttr(selection, "stroke", S && (([i]) => S[i]));
-  applyAttr(selection, "stroke-opacity", SO && (([i]) => SO[i]));
-  applyAttr(selection, "stroke-width", SW && (([i]) => SW[i]));
-  applyAttr(selection, "opacity", O && (([i]) => O[i]));
+export function applyGroupedChannelStyles(selection, {target}, {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO, strokeWidth: SW, opacity: O, href: H}) {
+  if (F) applyAttr(selection, "fill", ([i]) => F[i]);
+  if (FO) applyAttr(selection, "fill-opacity", ([i]) => FO[i]);
+  if (S) applyAttr(selection, "stroke", ([i]) => S[i]);
+  if (SO) applyAttr(selection, "stroke-opacity", ([i]) => SO[i]);
+  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);
   titleGroup(L)(selection);
 }
 
@@ -141,6 +148,18 @@ export function applyDirectStyles(selection, mark) {
   applyAttr(selection, "opacity", mark.opacity);
 }
 
+function applyHref(selection, href, target) {
+  selection.each(function(i) {
+    const h = href(i);
+    if (h != null) {
+      const a = document.createElementNS(namespaces.svg, "a");
+      a.setAttributeNS(namespaces.xlink, "href", h);
+      if (target != null) a.setAttribute("target", target);
+      this.parentNode.insertBefore(a, this).appendChild(this);
+    }
+  });
+}
+
 export function applyAttr(selection, name, value) {
   if (value != null) selection.attr(name, value);
 }

diff --git a/test/data/plot-documentation.json b/test/data/plot-documentation.json