Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Feature/1d multi brush extent #68

Merged
merged 2 commits into from
Apr 18, 2019
Merged

Feature/1d multi brush extent #68

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
59e8e0d
1d-multi brush uses the same strategy as 1d brush
BigFatDog Apr 8, 2019
486ff2f
brush demo
BigFatDog Apr 18, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
64 changes: 64 additions & 0 deletions demo/brush-with-arguments-1d-multi.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>



2 changes: 1 addition & 1 deletion demo/brush-with-arguments.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
3 changes: 3 additions & 0 deletions demo/index.html
View file
Open in desktop
Original file line number Diff 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
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
18 changes: 14 additions & 4 deletions src/brush/1d-multi/brushExtents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

/**
*
Expand All @@ -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;
}, []);
}
Expand Down