Move brush into draw axes

src/components/continuous/drawAxes.js

@@ -1,17 +1,100 @@
 import styles from './parallelCoordinates.css';
+import {
+  yAxis,
+  brushstart,
+} from "./util";
+
 
 const drawAxes = (
   svg,
+  ctx,
   dimensions,
-  xscale
+  metadata,
+  xscale,
+  height,
+  width,
+  render
 ) => {
 
+  /*****************************************
+  ******************************************
+  Handles a brush event, toggling the display of foreground lines.
+  ******************************************
+  ******************************************/
+
+  function brush () {
+    render.invalidate();
+
+    var actives = [];
+    svg.selectAll(".parcoords_axis .parcoords_brush")
+      .filter(function (d) {
+        return d3.brushSelection(this);
+      })
+      .each(function(d) {
+        actives.push({
+          dimension: d,
+          extent: d3.brushSelection(this)
+        });
+      });
+
+    var selected = metadata.filter(function(d) {
+      /* this is iterating over the enter dataset */
+      if (actives.every(function(active) {
+          var dim = active.dimension;
+          // test if point is within extents for each active brush
+          return dim.type.within(d[dim.key], active.extent, dim);
+        })) {
+        return true;
+      }
+    });
+
+    /* Reset canvas */
+    ctx.clearRect(0, 0, width, height);
+    ctx.globalAlpha = d3.min([0.85 / Math.pow(selected.length, 0.3), 1]);
+
+    /* send the selected cells to redux */
+
+
+    /* pass the result of the filter above to a fresh canvas, using RAF */
+    render(selected);
+
+    /* text beneath */
+    // output.text(d3.tsvFormat(selected.slice(0,22)));
+  }
+
   var axes = svg.selectAll(".parcoords_axis")
       .data(dimensions)
     .enter().append("g")
       .attr("class", `${styles.axis} parcoords_axis`)
       .attr("transform", (d,i) => { return "translate(" + xscale(i) + ")"; });
 
+  axes.append("g")
+      .each(function(d) {
+        var renderAxis = "axis" in d
+          ? d.axis.scale(d.scale)  // custom axis
+          : yAxis.scale(d.scale);  // default axis
+        d3.select(this).call(renderAxis);
+      })
+    .append("text")
+      .attr("class", styles.title)
+      .attr("text-anchor", "start")
+      .text(function(d) { return "description" in d ? d.description : d.key; });
+
+  // Add and store a brush for each axis.
+  axes.append("g")
+      .attr("class", `${styles.brush} parcoords_brush`)
+      .each(function(d) {
+        d3.select(this).call(d.brush = d3.brushY()
+          .extent([[-10,0], [10, height]])
+          .on("start", brushstart)
+          .on("brush", brush)
+          .on("end", brush)
+        )
+      })
+    .selectAll("rect")
+      .attr("x", -8)
+      .attr("width", 16);
+
   return axes;
 
 }