Merge pull request #44 from timelyportfolio/feature/brush-arguments2

brush arguments - replaces 32 and 42
BigFatDog · Aug 13, 2018 · 4d3e2ea · 4d3e2ea
2 parents bb4209c + 0019215
commit 4d3e2ea
Show file tree

Hide file tree

Showing 3 changed files with 121 additions and 10 deletions.
diff --git a/demo/brush-with-arguments.html b/demo/brush-with-arguments.html
@@ -0,0 +1,78 @@
+<!doctype html>
+<head>
+    <meta content="text/html;charset=utf-8" http-equiv="Content-Type">
+    <meta content="utf-8" http-equiv="encoding">
+</head>
+<title>Brushing Example</title>
+<link rel="stylesheet" type="text/css" href="./parcoords.css">
+<link rel="stylesheet" type="text/css" href="style.css">
+<script src="./lib/d3.v5.min.js"></script>
+<script src="./parcoords.standalone.js"></script>
+<div id="example" class="parcoords" style="width:960px;height:200px;"></div>
+<p>Loads an external <a href="data/cars.csv">csv file</a>, creates a custom <a
+        href="https://github.com/mbostock/d3/wiki/Quantitative-Scales#wiki-quantitative">quantitative color scale</a>
+    using <a href="http://bl.ocks.org/3014589">L*a*b interpolation</a>, and enables brushing.
+
+<h3>Brush Debug</h3>
+<p id="brush-results" style="background-color:#ccc;">
+</p>
+
+
+    <script>
+        var parcoords = ParCoords()("#example")
+        //    .color(color)
+            .alpha(0.4)
+            .on("brushstart", function(brushed, args){
+              if(args !== undefined) {
+                d3.select("#brush-results").html([
+                  '<span style="font-weight:bold;">brush end</span>',
+                  'dimension: ' + args.axis
+                ].join("<br/>"))
+              } else {
+                d3.select("#brush-results").html('cleared brush')
+              }
+            })
+            .on("brush", function(brushed, args){
+              if(args !== undefined) {
+                var brush_selection = args.selection
+                d3.select("#brush-results").html([
+                  '<span style="font-weight:bold;">brushing</span>',
+                  'dimension: ' + args.axis,
+                  'selection (raw): ' + JSON.stringify(args.selection.raw),
+                  'selection : ' + JSON.stringify(args.selection.scaled)
+                ].join("<br/>"))
+              } else {
+                d3.select("#brush-results").html('cleared brush')
+              }
+            })
+            .on("brushend", function(brushed, args){
+              if(args !== undefined  && Object.keys(this.brushExtents()).length > 0) {
+                var brush_selection = args.selection
+                d3.select("#brush-results").html([
+                  '<span style="font-weight:bold;">brush end</span>',
+                  'dimension: ' + args.axis,
+                  'selection (raw): ' + brush_selection.raw,
+                  'selection : ' + JSON.stringify(brush_selection.scaled)
+                ].join("<br/>"))
+              } else {
+                d3.select("#brush-results").html('cleared brush')
+              }
+            })
+
+
+        // load csv file and create the chart
+        d3.csv('data/cars.csv').then(function(data) {
+            parcoords
+                .data(data)
+                .hideAxis(["name"])
+                .composite("darker")
+                .render()
+                .shadows()
+                .reorderable()
+                .brushMode("1D-axes");  // enable brushing
+        });
+
+    </script>
+
+
+
diff --git a/demo/index.html b/demo/index.html
@@ -70,9 +70,6 @@ <h1>Demo</h1>
         <li>
             <a href="slickgrid.html">Slick Grid</a>
         </li>
-        <li>
-            <a href="marking.html">Marking</a>
-        </li>
         <li>
             <a href="superformula.html">Superformula</a>
         </li>
@@ -94,6 +91,9 @@ <h1>Demo</h1>
         <li>
             <a href="multi.html">multi instance</a>
         </li>
+        <li>
+            <a href="brush-with-arguments.html">brush with arguments</a>
+        </li>
     </ul>
 </body>
-</html>
+</html>
diff --git a/src/brush/1d/brushFor.js b/src/brush/1d/brushFor.js
@@ -1,11 +1,11 @@
-import { brushY } from 'd3-brush';
+import { brushY, brushSelection } from 'd3-brush';
 import { event } from 'd3-selection';
 
 import selected from './selected';
 
-const brushUpdated = (config, pc, events) => newSelection => {
+const brushUpdated = (config, pc, events, args) => newSelection => {
   config.brushed = newSelection;
-  events.call('brush', pc, config.brushed);
+  events.call('brush', pc, config.brushed, args);
   pc.renderBrushed();
 };
 
@@ -22,21 +22,54 @@ const brushFor = (state, config, pc, events, brushGroup) => (
 
   const _brush = brushY(_selector).extent([[-15, 0], [15, brushRangeMax]]);
 
+  const convertBrushArguments = args => {
+    const args_array = Array.prototype.slice.call(args);
+    const axis = args_array[0];
+    const selection_raw = brushSelection(args_array[2][0]);
+    const selection_scaled = selection_raw.map(d =>
+      config.dimensions[axis].yscale.invert(d)
+    );
+
+    return {
+      axis: args_array[0],
+      node: args_array[2][0],
+      selection: {
+        raw: selection_raw,
+        scaled: selection_scaled,
+      },
+    };
+  };
+
   _brush
     .on('start', function() {
       if (event.sourceEvent !== null) {
-        events.call('brushstart', pc, config.brushed);
+        events.call(
+          'brushstart',
+          pc,
+          config.brushed,
+          convertBrushArguments(arguments)
+        );
         if (typeof event.sourceEvent.stopPropagation === 'function') {
           event.sourceEvent.stopPropagation();
         }
       }
     })
     .on('brush', function() {
-      brushUpdated(config, pc, events)(selected(state, config, brushGroup)());
+      brushUpdated(
+        config,
+        pc,
+        events,
+        convertBrushArguments(arguments)
+      )(selected(state, config, brushGroup)());
     })
     .on('end', function() {
       brushUpdated(config, pc, events)(selected(state, config, brushGroup)());
-      events.call('brushend', pc, config.brushed);
+      events.call(
+        'brushend',
+        pc,
+        config.brushed,
+        convertBrushArguments(arguments)
+      );
     });
 
   state.brushes[axis] = _brush;