support dx, dy on all marks

On all marks except text, dx, dy are rendered as a transform(translate) property, possibly with the 0.5px offset on high-density screens.
On text marks, the dx and dy properties are used.

closes #379

Author: Fil

README.md

@@ -467,6 +467,10 @@ All marks support the following style options:
 * **strokeDasharray** - a comma-separated list of dash lengths (in pixels)
 * **mixBlendMode** - the [blend mode](https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode) (*e.g.*, *multiply*)
 * **shapeRendering** - the [shape-rendering mode](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/shape-rendering) (*e.g.*, *crispEdges*)
+* **dx** - horizontal offset; defaults to 0
+* **dy** - vertical offset; defaults to 0
+
+For all marks except [text](#plottextdata-options), the **dx** and **dy** options are rendered as a translate(dx, dy) transform property, possibly including a 0.5 offset on high-density screens.
 
 All marks support the following optional channels:
 
@@ -846,11 +850,9 @@ The following text-specific constant options are also supported:
 * **fontStyle** - the [font style](https://developer.mozilla.org/en-US/docs/Web/CSS/font-style); defaults to normal
 * **fontVariant** - the [font variant](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant); defaults to normal
 * **fontWeight** - the [font weight](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight); defaults to normal
-* **dx** - the horizontal offset; defaults to 0
-* **dy** - the vertical offset; defaults to 0
 * **rotate** - the rotation in degrees clockwise; defaults to 0
 
-The **dx** and **dy** options can be specified either as numbers representing pixels or as a string including units. For example, `"1em"` shifts the text by one [em](https://en.wikipedia.org/wiki/Em_(typography)), which is proportional to the **fontSize**. The **fontSize** and **rotate** options can be specified as either channels or constants. When fontSize or rotate is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
+For text marks, the **dx** and **dy** options can be specified either as numbers representing pixels or as a string including units. For example, `"1em"` shifts the text by one [em](https://en.wikipedia.org/wiki/Em_(typography)), which is proportional to the **fontSize**. The **fontSize** and **rotate** options can be specified as either channels or constants. When fontSize or rotate is specified as a number, it is interpreted as a constant; otherwise it is interpreted as a channel.
 
 #### Plot.text(*data*, *options*)
 

src/mark.js

@@ -7,7 +7,7 @@ const TypedArray = Object.getPrototypeOf(Uint8Array);
 const objectToString = Object.prototype.toString;
 
 export class Mark {
-  constructor(data, channels = [], {facet = "auto", ...options} = {}) {
+  constructor(data, channels = [], {facet = "auto", dx, dy, ...options} = {}) {
     const names = new Set();
     this.data = data;
     this.facet = facet ? keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]) : null;
@@ -27,6 +27,8 @@ export class Mark {
       }
       return true;
     });
+    this.dx = +dx || 0;
+    this.dy = +dy || 0;
   }
   initialize(facets) {
     let data = arrayify(this.data);

src/marks/area.js

@@ -59,9 +59,10 @@ export class Area extends Mark {
     });
   }
   render(I, {x, y}, {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, z: Z, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+    const {dx, dy} = this;
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, x, y)
+        .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(Z ? group(I, i => Z[i]).values() : [I])
           .join("path")

src/marks/bar.js

@@ -55,12 +55,12 @@ export class AbstractBar extends Mark {
     this.ry = impliedString(ry, "auto");
   }
   render(I, scales, channels, dimensions) {
-    const {rx, ry} = this;
+    const {dx, dy, rx, ry} = this;
     const {title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO} = channels;
     const index = filter(I, ...this._positions(channels), F, FO, S, SO);
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(this._transform, scales)
+        .call(this._transform, scales, dx, dy)
         .call(g => g.selectAll()
           .data(index)
           .join("rect")
@@ -110,8 +110,8 @@ export class BarX extends AbstractBar {
       options
     );
   }
-  _transform(selection, {x}) {
-    selection.call(applyTransform, x, null);
+  _transform(selection, {x}, dx, dy) {
+    selection.call(applyTransform, x, null, dx, dy);
   }
   _positions({x1: X1, x2: X2, y: Y}) {
     return [X1, X2, Y];
@@ -138,8 +138,8 @@ export class BarY extends AbstractBar {
       options
     );
   }
-  _transform(selection, {y}) {
-    selection.call(applyTransform, null, y);
+  _transform(selection, {y}, dx, dy) {
+    selection.call(applyTransform, null, y, dx, dy);
   }
   _positions({y1: Y1, y2: Y2, x: X}) {
     return [Y1, Y2, X];

src/marks/dot.js

@@ -1,7 +1,7 @@
 import {create} from "d3";
 import {filter, positive} from "../defined.js";
 import {Mark, identity, maybeColor, maybeNumber, maybeTuple, title} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr, offset} from "../style.js";
 
 export class Dot extends Mark {
   constructor(
@@ -55,9 +55,10 @@ export class Dot extends Mark {
   ) {
     let index = filter(I, X, Y, F, FO, S, SO);
     if (R) index = index.filter(i => positive(R[i]));
+    const {dx, dy} = this;
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, x, y, 0.5, 0.5)
+        .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
           .join("circle")

src/marks/frame.js

@@ -1,6 +1,6 @@
 import {create} from "d3";
 import {Mark, number} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform} from "../style.js";
+import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
 export class Frame extends Mark {
   constructor({
@@ -26,10 +26,11 @@ export class Frame extends Mark {
     channels,
     {marginTop, marginRight, marginBottom, marginLeft, width, height}
   ) {
+    const {dx, dy} = this;
     return create("svg:rect")
         .call(applyIndirectStyles, this)
         .call(applyDirectStyles, this)
-        .call(applyTransform, null, null, 0.5, 0.5)
+        .call(applyTransform, null, null, offset + dx, offset + dy)
         .attr("x", marginLeft + this.insetLeft)
         .attr("y", marginTop + this.insetTop)
         .attr("width", width - marginLeft - marginRight - this.insetLeft - this.insetRight)

src/marks/line.js

@@ -4,7 +4,7 @@ import {line as shapeLine} from "d3";
 import {Curve} from "../curve.js";
 import {defined} from "../defined.js";
 import {Mark, indexOf, identity, maybeColor, maybeTuple, titleGroup, maybeNumber} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr, offset} from "../style.js";
 
 export class Line extends Mark {
   constructor(
@@ -55,9 +55,10 @@ export class Line extends Mark {
     });
   }
   render(I, {x, y}, {x: X, y: Y, z: Z, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}) {
+    const {dx, dy} = this;
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, x, y, 0.5, 0.5)
+        .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(Z ? group(I, i => Z[i]).values() : [I])
           .join("path")

src/marks/link.js

@@ -2,7 +2,7 @@ import {create, path} from "d3";
 import {filter} from "../defined.js";
 import {Mark, maybeColor, maybeNumber, title} from "../mark.js";
 import {Curve} from "../curve.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr, offset} from "../style.js";
 
 export class Link extends Mark {
   constructor(
@@ -56,9 +56,10 @@ export class Link extends Mark {
     {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1, title: L, stroke: S, strokeOpacity: SO}
   ) {
     const index = filter(I, X1, Y1, X2, Y2, S, SO);
+    const {dx, dy} = this;
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, x, y, 0.5, 0.5)
+        .call(applyTransform, x, y, offset + dx, offset + dy)
         .call(g => g.selectAll()
           .data(index)
           .join("path")

src/marks/rect.js

@@ -65,11 +65,11 @@ export class Rect extends Mark {
     {x, y},
     {x1: X1, y1: Y1, x2: X2, y2: Y2, title: L, fill: F, fillOpacity: FO, stroke: S, strokeOpacity: SO}
   ) {
-    const {rx, ry} = this;
+    const {dx, dy, rx, ry} = this;
     const index = filter(I, X1, Y2, X2, Y2, F, FO, S, SO);
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, x, y)
+        .call(applyTransform, x, y, dx, dy)
         .call(g => g.selectAll()
           .data(index)
           .join("rect")

src/marks/rule.js

@@ -1,7 +1,7 @@
 import {create} from "d3";
 import {filter} from "../defined.js";
 import {Mark, identity, maybeColor, title, number, maybeNumber} from "../mark.js";
-import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr} from "../style.js";
+import {Style, applyDirectStyles, applyIndirectStyles, applyTransform, applyAttr, offset} from "../style.js";
 
 export class RuleX extends Mark {
   constructor(
@@ -46,7 +46,7 @@ export class RuleX extends Mark {
     const index = filter(I, X, Y1, Y2, S);
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, X && x, null, 0.5, 0)
+        .call(applyTransform, X && x, null, offset, 0)
         .call(g => g.selectAll("line")
           .data(index)
           .join("line")
@@ -103,9 +103,10 @@ export class RuleY extends Mark {
     {width, height, marginTop, marginRight, marginLeft, marginBottom}
   ) {
     const index = filter(I, Y, X1, X2);
+    const {dx, dy} = this;
     return create("svg:g")
         .call(applyIndirectStyles, this)
-        .call(applyTransform, null, Y && y, 0, 0.5)
+        .call(applyTransform, null, Y && y, dx, offset + dy)
         .call(g => g.selectAll("line")
           .data(index)
           .join("line")