Selection

* internal selection boolean channel & dataflow
* internal dispatch
* clickable option on dots and rules
* merge #71
* onchange handler
* marks always have a nodes property and share a default select function which hides/shows the children
* facets: when using faceted brushes, clicking on a brush cancels the others; and a programmatic selection cancels all the brushes

Author: Fil

src/facet.js

@@ -4,27 +4,28 @@ import {Mark, first, second, markify, where} from "./mark.js";
 import {applyScales} from "./scales.js";
 import {filterStyles} from "./style.js";
 
-export function facets(data, {x, y, ...options}, marks) {
+export function facets(data, {x, y, ...options}, marks, selectionData) {
   return x === undefined && y === undefined
     ? marks // if no facets are specified, ignore!
-    : [new Facet(data, {x, y, ...options}, marks)];
+    : [new Facet(data, {x, y, ...options}, marks, selectionData)];
 }
 
 class Facet extends Mark {
-  constructor(data, {x, y, ...options} = {}, marks = []) {
+  constructor(data, {x, y, ...options} = {}, marks = [], selectionData) {
     if (data == null) throw new Error("missing facet data");
     super(
       data,
       [
         {name: "fx", value: x, scale: "fx", optional: true},
         {name: "fy", value: y, scale: "fy", optional: true}
       ],
-      options
+      {selection: !!selectionData, ...options}
     );
     this.marks = marks.flat(Infinity).map(markify);
     // The following fields are set by initialize:
     this.marksChannels = undefined; // array of mark channels
     this.marksIndexByFacet = undefined; // map from facet key to array of mark indexes
+    this.selectionData = selectionData;
   }
   initialize() {
     const {index, channels} = super.initialize();
@@ -34,18 +35,20 @@ class Facet extends Mark {
     const subchannels = [];
     const marksChannels = this.marksChannels = [];
     const marksIndexByFacet = this.marksIndexByFacet = facetMap(channels);
+    const {selectionData} = this;
     for (const facetKey of facetsKeys) {
       marksIndexByFacet.set(facetKey, new Array(this.marks.length));
     }
     let facetsExclude;
+    let selectable;
     for (let i = 0; i < this.marks.length; ++i) {
       const mark = this.marks[i];
       const {facet} = mark;
       const markFacets = facet === "auto" ? mark.data === this.data ? facetsIndex : undefined
         : facet === "include" ? facetsIndex
         : facet === "exclude" ? facetsExclude || (facetsExclude = facetsIndex.map(f => Uint32Array.from(difference(index, f))))
         : undefined;
-      const {index: I, channels: markChannels} = mark.initialize(markFacets, channels);
+      const {index: I, channels: markChannels} = mark.initialize(markFacets, channels, selectionData);
       // If an index is returned by mark.initialize, its structure depends on
       // whether or not faceting has been applied: it is a flat index ([0, 1, 2,
       // …]) when not faceted, and a nested index ([[0, 1, …], [2, 3, …], …])
@@ -64,9 +67,11 @@ class Facet extends Mark {
       for (const [, channel] of markChannels) {
         subchannels.push([, channel]);
       }
+      if (mark.selectable) selectable = true;
+      mark.onchange = (event) => this.onchange(event, I);
       marksChannels.push(markChannels);
     }
-    return {index, channels: [...channels, ...subchannels]};
+    return {index, channels: [...channels, ...subchannels], selectable};
   }
   render(I, scales, channels, dimensions, axes) {
     const {marks, marksChannels, marksIndexByFacet} = this;
@@ -126,11 +131,19 @@ class Facet extends Mark {
                   values,
                   subdimensions
                 );
-                if (node != null) this.appendChild(node);
+                if (node != null) {
+                  marks[i].nodes.push(node);
+                  this.appendChild(node);
+                }
               }
             }))
       .node();
   }
+  select(S, options) {
+    for (const mark of this.marks) {
+      if (mark.selectable) mark.select(S, options);
+    }
+  }
 }
 
 // Derives a copy of the specified axis with the label disabled.

src/index.js

@@ -13,6 +13,7 @@ export {RuleX, RuleY, ruleX, ruleY} from "./marks/rule.js";
 export {Text, text, textX, textY} from "./marks/text.js";
 export {TickX, TickY, tickX, tickY} from "./marks/tick.js";
 export {Vector, vector} from "./marks/vector.js";
+export {Brush, brush, brushX, brushY} from "./marks/brush.js";
 export {filter} from "./transforms/filter.js";
 export {reverse} from "./transforms/reverse.js";
 export {sort, shuffle} from "./transforms/sort.js";

src/mark.js

@@ -1,4 +1,4 @@
-import {ascending, color, descending, rollup, sort} from "d3";
+import {ascending, color, descending, rollup, selectAll, sort} from "d3";
 import {plot} from "./plot.js";
 import {registry} from "./scales/index.js";
 import {styles} from "./style.js";
@@ -11,11 +11,12 @@ const objectToString = Object.prototype.toString;
 
 export class Mark {
   constructor(data, channels = [], options = {}, defaults) {
-    const {facet = "auto", sort, dx, dy} = options;
+    const {facet = "auto", selection, sort, dx, dy} = options;
     const names = new Set();
     this.data = data;
     this.sort = isOptions(sort) ? sort : null;
     this.facet = facet == null || facet === false ? null : keyword(facet === true ? "include" : facet, "facet", ["auto", "include", "exclude"]);
+    this.selection = selection == null || selection === false ? null : keyword(selection === true ? "include" : selection, "selection", ["auto", "include"]);
     const {transform} = basic(options);
     this.transform = transform;
     if (defaults !== undefined) channels = styles(this, options, channels, defaults);
@@ -35,8 +36,9 @@ export class Mark {
     });
     this.dx = +dx || 0;
     this.dy = +dy || 0;
+    this.nodes = [];
   }
-  initialize(facets, facetChannels) {
+  initialize(facets, facetChannels, selection) {
     let data = arrayify(this.data);
     let index = facets === undefined && data != null ? range(data) : facets;
     if (data !== undefined && this.transform !== undefined) {
@@ -50,8 +52,22 @@ export class Mark {
       return [name == null ? undefined : `${name}`, Channel(data, channel)];
     });
     if (this.sort != null) channelSort(channels, facetChannels, data, this.sort);
+    this.selectable = this.selection === "include" || (this.selection === "auto" && this.data === selection);
     return {index, channels};
   }
+  select(S, {transition}) {
+    let sel = selectAll(this.nodes).selectChildren();
+    if (transition) {
+      const {delay, duration} = typeof transition === "object" ? transition : {};
+      sel = sel.transition();
+      if (delay !== undefined) sel.delay(delay);
+      if (duration !== undefined) sel.duration(duration);
+    }
+    return sel
+      .style("opacity", 1e-6)
+      .filter(i => S[i])
+      .style("opacity", 1);
+  }
   plot({marks = [], ...options} = {}) {
     return plot({...options, marks: [...marks, this]});
   }

src/marks/bar.js

@@ -21,8 +21,9 @@ export class AbstractBar extends Mark {
     this.ry = impliedString(ry, "auto");
   }
   render(I, scales, channels, dimensions) {
-    const {dx, dy, rx, ry} = this;
+    const {dx, dy, rx, ry, onchange} = this;
     const index = filter(I, ...this._positions(channels));
+    let selected;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(this._transform, scales, dx, dy)
@@ -36,7 +37,14 @@ export class AbstractBar extends Mark {
             .attr("height", this._height(scales, channels, dimensions))
             .call(applyAttr, "rx", rx)
             .call(applyAttr, "ry", ry)
-            .call(applyChannelStyles, this, channels))
+            .call(applyChannelStyles, this, channels)
+            .call(!(onchange && this.clickable)
+              ? () => {}
+              : e => e.on("click", function(event, i) {
+                selected = selected === this || event.shiftKey ? undefined : this;
+                onchange({ detail: { filter: selected ? ((d, j) => i === j) : true }});
+              })
+            ))
       .node();
   }
   _x(scales, {x: X}, {marginLeft}) {

src/marks/brush.js

@@ -0,0 +1,73 @@
+import {brush as brusher, brushX as brusherX, brushY as brusherY, create} from "d3";
+import {Mark, identity, first, second} from "../mark.js";
+
+const defaults = {};
+export class Brush extends Mark {
+  constructor(data, {x = first, y = second, quiet = false, selection, ...options} = {}) {
+    super(
+      data,
+      [
+        {name: "x", value: x, scale: "x", optional: true},
+        {name: "y", value: y, scale: "y", optional: true}
+      ],
+      {...options, selection: true},
+      defaults
+    );
+    this.initialSelection = selection;
+    this.quiet = !!quiet;
+    this.brushes = [];
+  }
+  render(
+    I,
+    scales,
+    {x: X, y: Y},
+    {marginLeft, width, marginRight, marginTop, height, marginBottom}
+  ) {
+    const bounds = [
+      [Math.floor(marginLeft), Math.floor(marginTop)],
+      [Math.ceil(width - marginRight), Math.ceil(height - marginBottom)]
+    ];
+    const F = new Uint8Array(X ? X.length : Y.length);
+    const {brushes, quiet} = this;
+    const origin = brushes.length;
+    for (const i of I) F[i] = 1;
+    const {onchange} = this;
+    const brush = (X && Y ? brusher : X ? brusherX : brusherY)()
+      .extent(bounds)
+      .on("start brush end", (event) => {
+        const {selection, sourceEvent} = event;
+        if (sourceEvent === undefined) return; // a programmatic selection clears all the brushes
+        if (!selection) {
+          onchange({detail: {filter: quiet, origin}});
+        } else {
+          let x0, x1, y0, y1;
+          if (X) ([x0, x1] = Y ? [selection[0][0], selection[1][0]] : selection);
+          if (Y) ([y0, y1] = X ? [selection[0][1], selection[1][1]] : selection);
+          onchange({detail: {
+            filter: X && Y ? (d, i) => F[i] && X[i] >= x0 && X[i] <= x1 && Y[i] >= y0 && Y[i] <= y1
+              : X ? (d, i) => F[i] && X[i] >= x0 && X[i] <= x1
+              : (d, i) => F[i] && Y[i] >= y0 && Y[i] <= y1,
+            origin
+          }});
+        }
+      });
+      const g = create("svg:g").call(brush);
+      brushes.push(() => g.call(brush.clear));
+      return g.node();
+  }
+  select(event, {origin}) {
+    this.brushes.forEach((clear, i) => i !== origin && clear());
+  }
+}
+
+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});
+}

src/marks/dot.js

@@ -12,7 +12,7 @@ const defaults = {
 
 export class Dot extends Mark {
   constructor(data, options = {}) {
-    const {x, y, r, rotate, symbol = symbolCircle} = options;
+    const {x, y, r, rotate, symbol = symbolCircle, clickable} = options;
     const [vrotate, crotate] = maybeNumberChannel(rotate, 0);
     const [vsymbol, csymbol] = maybeSymbolChannel(symbol);
     const [vr, cr] = maybeNumberChannel(r, vsymbol == null ? 3 : 4.5);
@@ -31,6 +31,7 @@ export class Dot extends Mark {
     this.r = cr;
     this.rotate = crotate;
     this.symbol = csymbol;
+    this.clickable = !!clickable;
 
     // Give a hint to the symbol scale; this allows the symbol scale to chose
     // appropriate default symbols based on whether the dots are filled or
@@ -53,12 +54,13 @@ export class Dot extends Mark {
     {width, height, marginTop, marginRight, marginBottom, marginLeft}
   ) {
     const {x: X, y: Y, r: R, rotate: A, symbol: S} = channels;
-    const {dx, dy} = this;
+    const {dx, dy, onchange} = this;
     const cx = (marginLeft + width - marginRight) / 2;
     const cy = (marginTop + height - marginBottom) / 2;
     let index = filter(I, X, Y, A, S);
     if (R) index = index.filter(i => positive(R[i]));
     const circle = this.symbol === symbolCircle;
+    let selected;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, offset + dx, offset + dy)
@@ -88,7 +90,14 @@ export class Dot extends Mark {
                       return p;
                     });
               })
-            .call(applyChannelStyles, this, channels))
+            .call(applyChannelStyles, this, channels)
+            .call(!(onchange && this.clickable)
+              ? () => {}
+              : e => e.on("click", function(event, i) {
+                selected = selected === this || event.shiftKey ? undefined : this;
+                onchange({ detail: { filter: selected ? ((d, j) => i === j) : true }});
+              })
+            ))
       .node();
   }
 }

src/marks/image.js

@@ -68,7 +68,8 @@ export class Image extends Mark {
     if (H) index = index.filter(i => positive(H[i]));
     const cx = (marginLeft + width - marginRight) / 2;
     const cy = (marginTop + height - marginBottom) / 2;
-    const {dx, dy} = this;
+    const {dx, dy, onchange} = this;
+    let selected;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, offset + dx, offset + dy)
@@ -83,7 +84,14 @@ 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, this, channels))
+            .call(applyChannelStyles, this, channels)
+            .call(!(onchange && this.clickable)
+              ? () => {}
+              : e => e.on("click", function(event, i) {
+                selected = selected === this || event.shiftKey ? undefined : this;
+                onchange({ detail: { filter: selected ? ((d, j) => i === j) : true }});
+              })
+            ))
       .node();
   }
 }

src/marks/link.js

@@ -28,8 +28,9 @@ export class Link extends Mark {
   }
   render(I, {x, y}, channels) {
     const {x1: X1, y1: Y1, x2: X2 = X1, y2: Y2 = Y1} = channels;
-    const {dx, dy} = this;
+    const {dx, dy, onchange} = this;
     const index = filter(I, X1, Y1, X2, Y2);
+    let selected;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, offset + dx, offset + dy)
@@ -46,7 +47,14 @@ export class Link extends Mark {
               c.lineEnd();
               return `${p}`;
             })
-            .call(applyChannelStyles, this, channels))
+            .call(applyChannelStyles, this, channels)
+            .call(!(onchange && this.clickable)
+              ? () => {}
+              : e => e.on("click", function(event, i) {
+                selected = selected === this || event.shiftKey ? undefined : this;
+                onchange({ detail: { filter: selected ? ((d, j) => i === j) : true }});
+              })
+            ))
       .node();
   }
 }

src/marks/rect.js

@@ -45,8 +45,9 @@ export class Rect extends Mark {
   render(I, {x, y}, channels, dimensions) {
     const {x1: X1, y1: Y1, x2: X2, y2: Y2} = channels;
     const {marginTop, marginRight, marginBottom, marginLeft, width, height} = dimensions;
-    const {insetTop, insetRight, insetBottom, insetLeft, dx, dy, rx, ry} = this;
+    const {insetTop, insetRight, insetBottom, insetLeft, dx, dy, rx, ry, onchange} = this;
     const index = filter(I, X1, Y2, X2, Y2);
+    let selected;
     return create("svg:g")
         .call(applyIndirectStyles, this)
         .call(applyTransform, x, y, dx, dy)
@@ -60,7 +61,14 @@ 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, this, channels))
+            .call(applyChannelStyles, this, channels)
+            .call(!(onchange && this.clickable)
+              ? () => {}
+              : e => e.on("click", function(event, i) {
+                selected = selected === this || event.shiftKey ? undefined : this;
+                onchange({ detail: { filter: selected ? ((d, j) => i === j) : true }});
+              })
+            ))
       .node();
   }
 }