brush

closes #5

Author: Fil

package.json

@@ -45,6 +45,7 @@
   "dependencies": {
     "d3-array": "^2.8.0",
     "d3-axis": "^2.0.0",
+    "d3-brush": "^2.0.0",
     "d3-color": "^2.0.0",
     "d3-interpolate": "^2.0.1",
     "d3-scale": "^3.2.3",

src/index.js

@@ -3,6 +3,7 @@ export {Mark} from "./mark.js";
 export {Area, area, areaX, areaY} from "./marks/area.js";
 export {BarX, BarY, barX, barY} from "./marks/bar.js";
 export {bin, binX, binY} from "./marks/bin.js";
+export {brush, brushX, brushY} from "./marks/brush.js";
 export {Cell, cell, cellX, cellY} from "./marks/cell.js";
 export {Dot, dot, dotX, dotY} from "./marks/dot.js";
 export {Frame, frame} from "./marks/frame.js";

src/marks/brush.js

@@ -0,0 +1,125 @@
+import {extent} from "d3-array";
+import {brush as brusher, brushX as brusherX, brushY as brusherY} from "d3-brush";
+import {create} from "d3-selection";
+import {filter} from "../defined.js";
+import {Mark, identity, first, second} from "../mark.js";
+import {Style} from "../style.js";
+const {max, min} = Math;
+
+export class Brush extends Mark {
+  constructor(
+    data,
+    {
+      x = first,
+      y = second,
+      selection,
+      transform,
+      ...style
+    } = {}
+  ) {
+    super(
+      data,
+      [
+        {name: "picker", value: identity},
+        {name: "x", value: x, scale: "x", optional: true},
+        {name: "y", value: y, scale: "y", optional: true}
+      ],
+      transform
+    );
+    Style(this, style);
+    this.initialSelection = selection;
+  }
+  render(
+    I,
+    {x, y},
+    {x: X, y: Y, picker: J},
+    {marginLeft, width, marginRight, marginTop, height, marginBottom}
+  ) {
+    let svg;
+    const g = create("svg:g");
+    const data = this.data;
+
+    const bounds = [
+      [Math.floor(marginLeft), Math.floor(marginTop)],
+      [Math.ceil(width - marginRight), Math.ceil(height - marginBottom)]
+    ];
+    const brush = (x && y ? brusher : x ? brusherX : brusherY)()
+      .extent(bounds)
+      .on("start brush end", ({type, selection, sourceEvent}) => {
+        let index = filter(I, X, Y);
+        if (selection) {
+          if (x) {
+            const e = y ? [selection[0][0], selection[1][0]] : selection;
+            const [x0, x1] = extent(e.map(x.invert));
+            index = index.filter(i => X[i] >= x0 && X[i] <= x1);
+          }
+          if (y) {
+            const e = x ? [selection[0][1], selection[1][1]] : selection;
+            const [y0, y1] = extent(e.map(y.invert));
+            index = index.filter(i => Y[i] >= y0 && Y[i] <= y1);
+          }
+        }
+        const dots = selection ? Array.from(index, i => J[i]) : data;
+      
+        if (svg) {
+          svg.value = dots;
+          svg.dispatchEvent(new CustomEvent('input'));
+          if (sourceEvent && type === "start") {
+            for (const {b, g} of svg.__brushes) {
+              if (b !== brush) g.call(b.clear);
+            }
+          }
+        }
+      });
+  
+    g.call(brush);
+    
+    /* 🌶 async
+     * wait for the ownerSVGElement to:
+     * - send the first signal
+     * - register the multiple brushes (for faceting) 
+     */
+    setTimeout(() => {
+      svg = g.node().ownerSVGElement;
+      if (!svg.__brushes) svg.__brushes = [];
+      svg.__brushes.push({b: brush, g});
+
+      // initial setup works only on one facet
+      if (svg.__brushes.length === 1) {
+        if (this.initialSelection) {
+          const s = this.initialSelection;
+          if (x && y) {
+            const [x0, x1] = extent([x(s[0][0]), x(s[1][0])]);
+            const [y0, y1] = extent([y(s[0][1]), y(s[1][1])]);
+            g.call(brush.move, [
+              [ max(x0, bounds[0][0]), max(y0, bounds[0][1]) ],
+              [ min(x1, bounds[1][0]), min(y1, bounds[1][1]) ]
+            ]);
+          } else if (x) {
+            const [x0, x1] = extent(s.map(x));
+            g.call(brush.move, [ max(x0, bounds[0][0]), min(x1, bounds[1][0]) ]);
+          } else if (y) {
+            const [y0, y1] = extent(s.map(y));
+            g.call(brush.move, [ max(y0, bounds[0][1]), min(y1, bounds[1][1]) ]);
+          }
+        } else {
+          g.call(brush.clear);
+        }
+      }
+    }, 1);
+  
+    return g.node();
+  }
+}
+
+export function brush(data, options) {
+  return new Brush(data, options);
+}
+
+export function brushX(data, {x = identity, ...options} = {}) {
+  return new Brush(data, {...options, x, y: null});
+}
+
+export function brushY(data, {y = identity, ...options} = {}) {
+  return new Brush(data, {...options, x: null, y});
+}

yarn.lock

@@ -706,7 +706,7 @@ d3-axis@2, d3-axis@^2.0.0:
   resolved "https://registry.yarnpkg.com/d3-axis/-/d3-axis-2.0.0.tgz#40aebb65626ffe6d95e9441fbf9194274b328a8b"
   integrity sha512-9nzB0uePtb+u9+dWir+HTuEAKJOEUYJoEwbJPsZ1B4K3iZUgzJcSENQ05Nj7S4CIfbZZ8/jQGoUzGKFznBhiiQ==
 
-d3-brush@2:
+d3-brush@2, d3-brush@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/d3-brush/-/d3-brush-2.1.0.tgz#adadfbb104e8937af142e9a6e2028326f0471065"
   integrity sha512-cHLLAFatBATyIKqZOkk/mDHUbzne2B3ZwxkzMHvFTCZCmLaXDpZRihQSn8UNXTkGD/3lb/W2sQz0etAftmHMJQ==