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 <mbostock@gmail.com>

Co-authored-by: Philippe Rivière <fil@rezo.net>

Author: mbostock

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.
 

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]))

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}) {

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();
   }
 }

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();
   }
 }

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]))

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();
   }
 }

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();
   }
 }

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();
   }
 }

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();
   }
 }