fix initial setup of the brush

Author: Fil

src/marks/brush.js

@@ -4,6 +4,7 @@ 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(
@@ -36,12 +37,14 @@ export class Brush extends Mark {
   ) {
     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([
-        [Math.floor(marginLeft), Math.floor(marginTop)],
-        [Math.ceil(width - marginRight), Math.ceil(height - marginBottom)]
-      ])
+      .extent(bounds)
       .on("start brush end", ({type, selection, sourceEvent}) => {
         let index = filter(I, X, Y);
         if (selection) {
@@ -56,7 +59,7 @@ export class Brush extends Mark {
             index = index.filter(i => Y[i] >= y0 && Y[i] < y1);
           }
         }
-        const dots = selection ? Array.from(index, i => J[i]) : this.data;
+        const dots = selection ? Array.from(index, i => J[i]) : data;
 
         if (svg) {
           svg.value = dots;
@@ -80,19 +83,28 @@ export class Brush extends Mark {
       svg = g.node().ownerSVGElement;
       if (!svg.__brushes) svg.__brushes = [];
       svg.__brushes.push({b: brush, g});
-      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, [[x0, y0], [x1, y1]]);
-        } else if (x) {
-          g.call(brush.move, extent(s.map(x)));
-        } else if (y) {
-          g.call(brush.move, extent(s.map(y)));
+
+      // 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);
         }
-      } else {
-        g.call(brush.clear);
       }
     }, 1);