node[Plot.selection]

Author: mbostock

src/index.js

@@ -14,6 +14,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 {selection} from "./selection.js";
 export {valueof} from "./options.js";
 export {filter, reverse, sort, shuffle} from "./transforms/basic.js";
 export {bin, binX, binY} from "./transforms/bin.js";

src/marks/brush.js

@@ -1,6 +1,7 @@
 import {brush as brusher, brushX as brusherX, brushY as brusherY, create, select} from "d3";
 import {identity, maybeTuple} from "../options.js";
-import {Mark, selectionEquals} from "../plot.js";
+import {Mark} from "../plot.js";
+import {selection, selectionEquals} from "../selection.js";
 import {applyDirectStyles, applyIndirectStyles} from "../style.js";
 
 const defaults = {
@@ -32,33 +33,33 @@ export class Brush extends Mark {
         .call((X && Y ? brusher : X ? brusherX : brusherY)()
           .extent([[marginLeft, marginTop], [width - marginRight, height - marginBottom]])
           .on("start brush end", function(event) {
-            const {type, selection} = event;
+            const {type, selection: extent} = event;
             // For faceting, when starting a brush in a new facet, clear the
             // brush and selection on the old facet. In the future, we might
             // allow independent brushes across facets by disabling this?
             if (type === "start" && brush.currentElement !== this) {
               if (brush.currentElement !== null) {
                 select(brush.currentElement).call(event.target.clear, event);
-                brush.currentElement.selection = null;
+                brush.currentElement[selection] = null;
               }
               brush.currentElement = this;
             }
             let S = null;
-            if (selection) {
+            if (extent) {
               S = index;
               if (X) {
-                let [x0, x1] = Y ? [selection[0][0], selection[1][0]] : selection;
+                let [x0, x1] = Y ? [extent[0][0], extent[1][0]] : extent;
                 if (x.bandwidth) x0 -= x.bandwidth();
                 S = S.filter(i => x0 <= X[i] && X[i] <= x1);
               }
               if (Y) {
-                let [y0, y1] = X ? [selection[0][1], selection[1][1]] : selection;
+                let [y0, y1] = X ? [extent[0][1], extent[1][1]] : extent;
                 if (y.bandwidth) y0 -= y.bandwidth();
                 S = S.filter(i => y0 <= Y[i] && Y[i] <= y1);
               }
             }
-            if (!selectionEquals(this.selection, S)) {
-              this.selection = S;
+            if (!selectionEquals(this[selection], S)) {
+              this[selection] = S;
               this.dispatchEvent(new Event("input", {bubbles: true}));
             }
           }))
@@ -67,7 +68,7 @@ export class Brush extends Mark {
           .call(applyIndirectStyles, options)
           .call(applyDirectStyles, options))
       .node();
-    g.selection = null;
+    g[selection] = null;
     return g;
   }
 }

src/plot.js

@@ -6,6 +6,7 @@ import {Dimensions} from "./dimensions.js";
 import {Legends, exposeLegends} from "./legends.js";
 import {arrayify, isOptions, keyword, range, first, second, where, take} from "./options.js";
 import {Scales, ScaleFunctions, autoScaleRange, applyScales, exposeScales} from "./scales.js";
+import {selection} from "./selection.js";
 import {applyInlineStyles, maybeClassName, styles} from "./style.js";
 import {basic} from "./transforms/basic.js";
 
@@ -102,11 +103,10 @@ export function plot(options = {}) {
     const index = filter(markIndex.get(mark), channels, values);
     const node = mark.render(index, scales, values, dimensions, axes);
     if (node != null) {
-      // TODO A more explicit indication that a mark defines a value (e.g., a symbol)?
-      if (node.selection !== undefined) {
-        initialValue = markValue(mark, node.selection);
+      if (node[selection] !== undefined) {
+        initialValue = markValue(mark, node[selection]);
         node.addEventListener("input", () => {
-          figure.value = markValue(mark, node.selection);
+          figure.value = markValue(mark, node[selection]);
         });
       }
       svg.appendChild(node);
@@ -204,18 +204,6 @@ function markValue(mark, selection) {
   return selection === null ? mark.data : take(mark.data, selection);
 }
 
-// Given two (possibly null, possibly an index, but not undefined) selections,
-// returns true if the two represent the same selection, and false otherwise.
-// This assumes that the selection is a in-order subset of the original index.
-export function selectionEquals(s1, s2) {
-  if (s1 === s2) return true;
-  if (s1 == null || s2 == null) return false;
-  const n = s1.length;
-  if (n !== s2.length) return false;
-  for (let i = 0; i < n; ++i) if (s1[i] !== s2[i]) return false;
-  return true;
-}
-
 class Render extends Mark {
   constructor(render) {
     super();
@@ -345,13 +333,13 @@ class Facet extends Mark {
                 const index = filter(marksFacetIndex[i], marksChannels[i], values);
                 const node = marks[i].render(index, scales, values, subdimensions);
                 if (node != null) {
-                  if (node.selection !== undefined) {
+                  if (node[selection] !== undefined) {
                     if (marks[i].data !== data) throw new Error("selection must use facet data");
                     if (selectionByFacet === undefined) selectionByFacet = facetMap(channels);
-                    selectionByFacet.set(key, node.selection);
+                    selectionByFacet.set(key, node[selection]);
                     node.addEventListener("input", () => {
-                      selectionByFacet.set(key, node.selection);
-                      parent.selection = facetSelection(selectionByFacet);
+                      selectionByFacet.set(key, node[selection]);
+                      parent[selection] = facetSelection(selectionByFacet);
                     });
                   }
                   this.appendChild(node);
@@ -360,7 +348,7 @@ class Facet extends Mark {
             }))
       .node();
     if (selectionByFacet !== undefined) {
-      parent.selection = facetSelection(selectionByFacet);
+      parent[selection] = facetSelection(selectionByFacet);
     }
     return parent;
   }

src/selection.js

@@ -0,0 +1,18 @@
+// This symbol is used by interactive marks to define which data are selected. A
+// node returned by mark.render may expose a selection as node[selection], whose
+// value may be an array of numbers (e.g., [0, 1, 2, …]) representing an
+// in-order subset of the rendered index, or null if the selection is undefined.
+// The selection can be updated during interaction by emitting an input event.
+export const selection = Symbol("selection");
+
+// Given two (possibly null, possibly an index, but not undefined) selections,
+// returns true if the two represent the same selection, and false otherwise.
+// This assumes that the selection is a in-order subset of the original index.
+export function selectionEquals(s1, s2) {
+  if (s1 === s2) return true;
+  if (s1 == null || s2 == null) return false;
+  const n = s1.length;
+  if (n !== s2.length) return false;
+  for (let i = 0; i < n; ++i) if (s1[i] !== s2[i]) return false;
+  return true;
+}