Merge pull request #68 from BigFatDog/feature/1d-multi-brush-extent

Feature/1d multi brush extent
BigFatDog · Apr 18, 2019 · c0d56b0 · c0d56b0
2 parents 6d98caa + 486ff2f
commit c0d56b0
Show file tree

Hide file tree

Showing 5 changed files with 83 additions and 6 deletions.
diff --git a/demo/brush-with-arguments-1d-multi.html b/demo/brush-with-arguments-1d-multi.html
@@ -0,0 +1,64 @@
+<!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>
+<button id="show_ext">Show Extension</button>
+
+
+<script>
+    var parcoords = ParCoords()("#example")
+    //    .color(color)
+        .alpha(0.4)
+    // 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-multi");  // enable brushing
+    });
+
+    d3.select('#show_ext').on('click', function() {
+        var html = '';
+        var exts = parcoords.brushExtents();
+        for (var k of Object.keys(exts)) {
+            var brushes = exts[k];
+
+            if (brushes && brushes.length > 0) {
+                brushes.forEach(d => {
+                    html += [
+                        '<span style="font-weight:bold;">',
+                        'dimension: ' + k,
+                        '</span>',
+                        'selection (raw): ' + d.selection.raw,
+                        'selection : ' + JSON.stringify(d.selection.scaled)
+                    ].join("<br/>");
+                })
+            }
+
+            d3.select("#brush-results").html(html);
+        }
+
+    })
+
+</script>
+
+
+
diff --git a/demo/brush-with-arguments.html b/demo/brush-with-arguments.html
@@ -47,7 +47,7 @@ <h3>Brush Debug</h3>
             })
             .on("brushend", function(brushed, args){
               if(args !== undefined  && Object.keys(this.brushExtents()).length > 0) {
-                var brush_selection = args.selection
+                var brush_selection = args.selection;
                 d3.select("#brush-results").html([
                   '<span style="font-weight:bold;">brush end</span>',
                   'dimension: ' + args.axis,

diff --git a/demo/index.html b/demo/index.html
@@ -94,6 +94,9 @@ <h1>Demo</h1>
         <li>
             <a href="brush-with-arguments.html">brush with arguments</a>
         </li>
+        <li>
+            <a href="brush-with-arguments-1d-multi.html">brush with arguments (1d multi)</a>
+        </li>
         <li>
             <a href="snapshot.html">snapshot</a>
         </li>

diff --git a/package.json b/package.json
@@ -16,7 +16,7 @@
     "test": "mocha",
     "test:cover": "babel-node ./node_modules/istanbul/lib/cli.js cover ./node_modules/mocha/bin/_mocha",
     "prepare": "npm test",
-    "pretty": "prettier --single-quote --trailing-comma es5 --write \"{src,__{tests,demo,dist}__}/**/*.js\""
+    "format": "prettier --single-quote --trailing-comma es5 --write \"{src,__{tests,demo,dist}__}/**/*.{js,html}\""
   },
   "files": [
     "src",

diff --git a/src/brush/1d-multi/brushExtents.js b/src/brush/1d-multi/brushExtents.js
@@ -2,6 +2,7 @@ import { select } from 'd3-selection';
 import { brushSelection } from 'd3-brush';
 import newBrush from './newBrush';
 import drawBrushes from './drawBrushes';
+import invertByScale from '../invertByScale';
 
 /**
  *
@@ -23,13 +24,22 @@ const brushExtents = (state, config, pc, events, brushGroup) => extents => {
         acc[cur] = [];
       } else {
         acc[cur] = axisBrushes.reduce((d, p, i) => {
-          const range = brushSelection(
+          const raw = brushSelection(
             document.getElementById('brush-' + pos + '-' + i)
           );
-          if (range !== null) {
-            d = d.push(range);
-          }
 
+          if (raw) {
+            const yScale = config.dimensions[cur].yscale;
+            const scaled = invertByScale(raw, yScale);
+
+            d.push({
+              extent: p.brush.extent(),
+              selection: {
+                raw,
+                scaled,
+              },
+            });
+          }
           return d;
         }, []);
       }
-Original file line number
+Diff line change
@@ Expand Up / @@ -94,6 +94,9 @@ <h1>Demo</h1> @@
             <li>
                 <a href="brush-with-arguments.html">brush with arguments</a>
             </li>
+            <li>
+                <a href="brush-with-arguments-1d-multi.html">brush with arguments (1d multi)</a>
+            </li>
             <li>
                 <a href="snapshot.html">snapshot</a>
             </li>
@@ Expand Down @@