picker: click to update the plot's value

- this initial version works on rects
- default picker is d => d (each rect will send its value to the viewof), one can set picker: d => d.x
- picker: null will not set onclick
- bin transforms set picker = group => groupData (aka "the right thing")
- not fully tested with faceting, though it seems to work
- added a general mechanism to send the value as an Input event (not sure it's the right thing to do though), better than the async method of #71
- q: should we always send the initial value, and if so what data? a solution to this problem would be to opt in with a global {picker: data} and the picking would only apply to marks that have the same data.

test https://observablehq.com/d/f4e32e31ec214e38

Author: Fil

src/mark.js

@@ -45,6 +45,12 @@ export class Mark {
       })
     };
   }
+  update(g, values) {
+    const svg = g.ownerSVGElement;
+    console.log(values);
+    svg.value = values;
+    svg.dispatchEvent(new CustomEvent('input'));
+  }
 }
 
 // TODO Type coercion?

src/marks/rect.js

@@ -16,6 +16,7 @@ export class Rect extends Mark {
       title,
       fill,
       stroke,
+      picker = d => d,
       inset = 0,
       insetTop = inset,
       insetRight = inset,
@@ -38,7 +39,8 @@ export class Rect extends Mark {
         {name: "z", value: z, optional: true},
         {name: "title", value: title, optional: true},
         {name: "fill", value: vfill, scale: "color", optional: true},
-        {name: "stroke", value: vstroke, scale: "color", optional: true}
+        {name: "stroke", value: vstroke, scale: "color", optional: true},
+        {name: "picker", value: picker, optional: true}
       ],
       options
     );
@@ -53,7 +55,7 @@ export class Rect extends Mark {
   render(
     I,
     {x, y, color},
-    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, fill: F, stroke: S}
+    {x1: X1, y1: Y1, x2: X2, y2: Y2, z: Z, title: L, fill: F, stroke: S, picker: J}
   ) {
     const {rx, ry} = this;
     const index = filter(I, X1, Y2, X2, Y2, F, S);
@@ -64,6 +66,10 @@ export class Rect extends Mark {
         .call(g => g.selectAll()
           .data(index)
           .join("rect")
+            .call(J ? rect => rect
+              .on("click", (event, i) => super.update(event.currentTarget, J[i]))
+              : () => {}
+            )
             .call(applyDirectStyles, this)
             .attr("x", i => Math.min(x(X1[i]), x(X2[i])) + this.insetLeft)
             .attr("y", i => Math.min(y(Y1[i]), y(Y2[i])) + this.insetTop)

src/transforms/bin.js

@@ -2,27 +2,27 @@ import {bin as binner, cross, group} from "d3";
 import {valueof, first, second, range, identity, lazyChannel, maybeLazyChannel, maybeTransform, maybeColor, maybeValue, mid, take} from "../mark.js";
 
 export function binX({x, insetLeft = 1, ...options} = {}) {
-  const [transform, x1, x2, y, z, fill, stroke] = bin1(x, options);
-  return {y, x1, x2, ...transform, z, fill, stroke, insetLeft};
+  const [transform, x1, x2, y, z, fill, stroke, picker] = bin1(x, options);
+  return {y, x1, x2, ...transform, picker, z, fill, stroke, insetLeft};
 }
 
 export function binY({y, insetTop = 1, ...options} = {}) {
-  const [transform, y1, y2, x, z, fill, stroke] = bin1(y, options);
-  return {x, y1, y2, ...transform, z, fill, stroke, insetTop};
+  const [transform, y1, y2, x, z, fill, stroke, picker] = bin1(y, options);
+  return {x, y1, y2, ...transform, picker, z, fill, stroke, insetTop};
 }
 
 export function binR({x, y, ...options} = {}) {
-  const [transform, x1, x2, y1, y2, r, z, fill, stroke] = bin2(x, y, options);
-  return {x: mid(x1, x2), y: mid(y1, y2), r, ...transform, z, fill, stroke};
+  const [transform, x1, x2, y1, y2, r, z, fill, stroke, picker] = bin2(x, y, options);
+  return {x: mid(x1, x2), y: mid(y1, y2), r, ...transform, picker, z, fill, stroke};
 }
 
 export function binFill(options) {
   return bin({...options, out: "fill"});
 }
 
 export function bin({x, y, insetLeft = 1, insetTop = 1, out, ...options} = {}) {
-  const [transform, x1, x2, y1, y2, l, z, fill, stroke] = bin2(x, y, options);
-  return {x1, x2, y1, y2, ...transform, z, fill, stroke, insetLeft, insetTop, [out]: l};
+  const [transform, x1, x2, y1, y2, l, z, fill, stroke, picker] = bin2(x, y, options);
+  return {x1, x2, y1, y2, ...transform, picker, z, fill, stroke, insetLeft, insetTop, [out]: l};
 }
 
 function bin1(x, {domain, thresholds, normalize, cumulative, ...options} = {}) {
@@ -37,6 +37,7 @@ function bin1(x, {domain, thresholds, normalize, cumulative, ...options} = {}) {
   const [vstroke] = maybeColor(stroke);
   const [F = fill, setF] = maybeLazyChannel(vfill);
   const [S = stroke, setS] = maybeLazyChannel(vstroke);
+  const [J, setJ] = lazyChannel();
   return [
     {
       ...options,
@@ -80,6 +81,7 @@ function bin1(x, {domain, thresholds, normalize, cumulative, ...options} = {}) {
           }
           binIndex.push(binFacet);
         }
+        setJ(binData);
         return {data: binData, index: binIndex};
       })
     },
@@ -88,7 +90,8 @@ function bin1(x, {domain, thresholds, normalize, cumulative, ...options} = {}) {
     Y,
     Z,
     F,
-    S
+    S,
+    J
   ];
 }
 
@@ -112,6 +115,7 @@ function bin2(x, y, {domain, thresholds, normalize, ...options} = {}) {
   const [vstroke] = maybeColor(stroke);
   const [F = fill, setF] = maybeLazyChannel(vfill);
   const [S = stroke, setS] = maybeLazyChannel(vstroke);
+  const [J, setJ] = lazyChannel();
   return [
     {
       ...options,
@@ -156,6 +160,7 @@ function bin2(x, y, {domain, thresholds, normalize, ...options} = {}) {
           }
           binIndex.push(binFacet);
         }
+        setJ(binData);
         return {data: binData, index: binIndex};
       })
     },
@@ -166,7 +171,8 @@ function bin2(x, y, {domain, thresholds, normalize, ...options} = {}) {
     L,
     Z,
     F,
-    S
+    S,
+    J
   ];
 }