vector frameAnchor (#697)

* vector frameAnchor

* test

Co-authored-by: Philippe Rivière <[email protected]>

Author: mbostock

README.md

@@ -1188,9 +1188,12 @@ In addition to the [standard mark options](#marks), the following optional chann
 * **length** - the length in pixels; bound to the *length* scale; defaults to 12
 * **rotate** - the rotation angle in degrees clockwise; defaults to 0
 
+If either of the **x** or **y** channels are not specified, the corresponding position is controlled by the **frameAnchor** option.
+
 The following options are also supported:
 
 * **anchor** - one of *start*, *middle*, or *end*; defaults to *middle*
+* **frameAnchor** - the frame anchor; top-left, top, top-right, right, bottom-right, bottom, bottom-left, left, or middle (default)
 
 If the **anchor** is *start*, the arrow will start at the given *xy* position and point in the direction given by the rotation angle. If the **anchor** is *end*, the arrow will maintain the same orientation, but be positioned such that it ends in the given *xy* position. If the **anchor** is *middle*, the arrow will be likewise be positioned such that its midpoint intersects the given *xy* position.
 

src/marks/vector.js

@@ -1,8 +1,8 @@
 import {create} from "d3";
 import {radians} from "../math.js";
-import {maybeNumberChannel, maybeTuple, keyword} from "../options.js";
+import {maybeFrameAnchor, maybeNumberChannel, maybeTuple, keyword} from "../options.js";
 import {Mark} from "../plot.js";
-import {applyChannelStyles, applyDirectStyles, applyIndirectStyles, applyTransform, offset} from "../style.js";
+import {applyChannelStyles, applyDirectStyles, applyFrameAnchor, applyIndirectStyles, applyTransform, offset} from "../style.js";
 
 const defaults = {
   fill: null,
@@ -13,7 +13,7 @@ const defaults = {
 
 export class Vector extends Mark {
   constructor(data, options = {}) {
-    const {x, y, length, rotate, anchor = "middle"} = options;
+    const {x, y, length, rotate, anchor = "middle", frameAnchor} = options;
     const [vl, cl] = maybeNumberChannel(length, 12);
     const [vr, cr] = maybeNumberChannel(rotate, 0);
     super(
@@ -30,19 +30,16 @@ export class Vector extends Mark {
     this.length = cl;
     this.rotate = cr;
     this.anchor = keyword(anchor, "anchor", ["start", "middle", "end"]);
+    this.frameAnchor = maybeFrameAnchor(frameAnchor);
   }
-  render(
-    index,
-    {x, y},
-    channels,
-    {width, height, marginTop, marginRight, marginBottom, marginLeft}
-  ) {
+  render(index, {x, y}, channels, dimensions) {
     const {x: X, y: Y, length: L, rotate: R} = channels;
     const {dx, dy, length, rotate, anchor} = this;
+    const [cx, cy] = applyFrameAnchor(this, dimensions);
     const fl = L ? i => L[i] : () => length;
     const fr = R ? i => R[i] : () => rotate;
-    const fx = X ? i => X[i] : () => (marginLeft + width - marginRight) / 2;
-    const fy = Y ? i => Y[i] : () => (marginTop + height - marginBottom) / 2;
+    const fx = X ? i => X[i] : () => cx;
+    const fy = Y ? i => Y[i] : () => cy;
     const k = anchor === "start" ? 0 : anchor === "end" ? 1 : 0.5;
     return create("svg:g")
         .attr("fill", "none")
@@ -64,6 +61,6 @@ export class Vector extends Mark {
 }
 
 export function vector(data, {x, y, ...options} = {}) {
-  ([x, y] = maybeTuple(x, y));
+  if (options.frameAnchor === undefined) ([x, y] = maybeTuple(x, y));
   return new Vector(data, {...options, x, y});
 }

test/output/vectorFrame.svg

@@ -138,6 +138,7 @@ export {default as usPresidentialForecast2016} from "./us-presidential-forecast-
 export {default as usRetailSales} from "./us-retail-sales.js";
 export {default as usStatePopulationChange} from "./us-state-population-change.js";
 export {default as vectorField} from "./vector-field.js";
+export {default as vectorFrame} from "./vector-frame.js";
 export {default as wealthBritainBar} from "./wealth-britain-bar.js";
 export {default as wealthBritainProportionPlot} from "./wealth-britain-proportion-plot.js";
 export {default as wordCloud} from "./word-cloud.js";

test/plots/index.js

@@ -0,0 +1,64 @@
+import * as Plot from "@observablehq/plot";
+
+export default function() {
+  return Plot.plot({
+    inset: 12,
+    width: 200,
+    height: 200,
+    marks: [
+      Plot.frame(),
+      Plot.vector(
+        [null],
+        {
+          length: 100,
+          rotate: -135,
+          anchor: "start",
+          frameAnchor: "top-right",
+          dx: -10,
+          dy: 10
+        }
+      ),
+      Plot.vector(
+        [null],
+        {
+          length: 100,
+          rotate: 45,
+          anchor: "start",
+          frameAnchor: "bottom-left",
+          dx: 10,
+          dy: -10
+        }
+      ),
+      Plot.vector(
+        [null],
+        {
+          length: 100,
+          rotate: 135,
+          anchor: "start",
+          frameAnchor: "top-left",
+          dx: 10,
+          dy: 10
+        }
+      ),
+      Plot.vector(
+        [null],
+        {
+          length: 100,
+          rotate: -45,
+          anchor: "start",
+          frameAnchor: "bottom-right",
+          dx: -10,
+          dy: -10
+        }
+      ),
+      Plot.text(
+        [null],
+        {
+          x: null,
+          y: null,
+          text: () => "Ο"
+        }
+      )
+    ]
+  });
+}