domain, thresholds

src/marks/bin.js

@@ -1,20 +1,21 @@
-import {bin} from "d3-array";
+import {bin as binner} from "d3-array";
 import {field, identity, zero} from "../mark.js";
 import {Rect} from "./rect.js";
 
-// TODO Configurable thresholds
-// TODO What if value accessor is non-deterministic?
-// TODO What if data is not an array?
 export class Bin extends Rect {
-  constructor(data, value, channels, style) {
+  constructor(data, value, channels, {domain, thresholds, ...style} = {}) {
     super(data, channels, style);
-    // Because faceting may be in use, we don’t want d3.bin to choose thresholds
-    // dynamically based on the input data; instead, we extract the set of
-    // thresholds from an initial computation.
-    this.bin = bin().value(typeof value === "string" ? field(value) : value);
-    const bins = this.bin(data);
-    this.bin.domain([bins[0].x0, bins[bins.length - 1].x1]);
-    this.bin.thresholds(bins.slice(1).map(start));
+    if (typeof value !== "function") value = field(value + "");
+    const bin = this.bin = binner().value(value);
+    if (domain !== undefined) bin.domain(domain);
+    if (thresholds !== undefined) bin.thresholds(thresholds);
+    // We don’t want to choose thresholds dynamically for each facet; instead,
+    // we extract the set of thresholds from an initial computation.
+    if (domain === undefined || thresholds === undefined) {
+      const b = bin(data);
+      if (domain === undefined) bin.domain([b[0].x0, b[b.length - 1].x1]);
+      if (thresholds === undefined) bin.thresholds(b.slice(1).map(start));
+    }
   }
   initialize(data) {
     return super.initialize(this.bin(data));