@@ -15,6 +15,19 @@ var d3 = require('d3');
15
15
var overdrag = 40 ;
16
16
var legendWidth = 80 ;
17
17
18
+ var filterBar = {
19
+ width : 4 , // Visible width of the filter bar
20
+ capturewidth : 20 , // Mouse-sensitive width for interaction (Fitts law)
21
+ fillcolor : 'magenta' , // Color of the filter bar fill
22
+ fillopacity : 1 , // Filter bar fill opacity
23
+ strokecolor : 'white' , // Color of the filter bar side lines
24
+ strokeopacity : 1 , // Filter bar side stroke opacity
25
+ strokewidth : 1 , // Filter bar side stroke width in pixels
26
+ handleheight : 16 , // Height of the filter bar vertical resize areas on top and bottom
27
+ handleopacity : 1 , // Opacity of the filter bar vertical resize areas on top and bottom
28
+ handleoverlap : 0 // A larger than 0 value causes overlaps with the filter bar, represented as pixels.'
29
+ } ;
30
+
18
31
function keyFun ( d ) { return d . key ; }
19
32
20
33
function repeat ( d ) { return [ d ] ; }
@@ -98,10 +111,6 @@ function model(layout, d, i) {
98
111
var canvasWidth = width * canvasPixelRatio + 2 * lines . canvasOverdrag ;
99
112
var canvasHeight = height * canvasPixelRatio ;
100
113
101
- var resizeHeight = d . filterbar . handleheight ;
102
- var brushVisibleWidth = d . filterbar . width ;
103
- var brushCaptureWidth = d . filterbar . capturewidth || Math . min ( 32 , brushVisibleWidth + 16 ) ;
104
-
105
114
return {
106
115
key : i ,
107
116
dimensions : data ,
@@ -115,11 +124,7 @@ function model(layout, d, i) {
115
124
canvasHeight : canvasHeight ,
116
125
width : width ,
117
126
height : height ,
118
- brushVisibleWidth : brushVisibleWidth ,
119
- brushCaptureWidth : brushCaptureWidth ,
120
- resizeHeight : resizeHeight ,
121
- canvasPixelRatio : canvasPixelRatio ,
122
- filterBar : d . filterbar
127
+ canvasPixelRatio : canvasPixelRatio
123
128
} ;
124
129
}
125
130
@@ -197,9 +202,9 @@ module.exports = function(root, styledData, layout, callbacks) {
197
202
filterBarPattern . enter ( )
198
203
. append ( 'pattern' )
199
204
. attr ( 'id' , 'filterBarPattern' )
200
- . attr ( 'width' , function ( d ) { return d . model . brushCaptureWidth ; } )
205
+ . attr ( 'width' , filterBar . capturewidth )
201
206
. attr ( 'height' , function ( d ) { return d . model . height ; } )
202
- . attr ( 'x' , function ( d ) { return - d . model . brushVisibleWidth ; } )
207
+ . attr ( 'x' , - filterBar . width )
203
208
. attr ( 'patternUnits' , 'userSpaceOnUse' ) ;
204
209
205
210
var filterBarPatternGlyph = filterBarPattern . selectAll ( 'rect' )
@@ -208,14 +213,14 @@ module.exports = function(root, styledData, layout, callbacks) {
208
213
filterBarPatternGlyph . enter ( )
209
214
. append ( 'rect' )
210
215
. attr ( 'shape-rendering' , 'crispEdges' )
211
- . attr ( 'width' , function ( d ) { return d . model . brushVisibleWidth ; } )
216
+ . attr ( 'width' , filterBar . width )
212
217
. attr ( 'height' , function ( d ) { return d . model . height ; } )
213
- . attr ( 'x' , function ( d ) { return d . model . brushVisibleWidth / 2 ; } )
214
- . attr ( 'fill' , function ( d ) { return d . model . filterBar . fillcolor ; } )
215
- . attr ( 'fill-opacity' , function ( d ) { return d . model . filterBar . fillopacity ; } )
216
- . attr ( 'stroke' , function ( d ) { return d . model . filterBar . strokecolor ; } )
217
- . attr ( 'stroke-opacity' , function ( d ) { return d . model . filterBar . strokeopacity ; } )
218
- . attr ( 'stroke-width' , function ( d ) { return d . model . filterBar . strokewidth ; } ) ;
218
+ . attr ( 'x' , filterBar . width / 2 )
219
+ . attr ( 'fill' , filterBar . fillcolor )
220
+ . attr ( 'fill-opacity' , filterBar . fillopacity )
221
+ . attr ( 'stroke' , filterBar . strokecolor )
222
+ . attr ( 'stroke-opacity' , filterBar . strokeopacity )
223
+ . attr ( 'stroke-width' , filterBar . strokewidth ) ;
219
224
}
220
225
221
226
var parcoordsModel = d3 . select ( root ) . selectAll ( '.parcoordsModel' )
@@ -419,7 +424,7 @@ module.exports = function(root, styledData, layout, callbacks) {
419
424
axisTitle . enter ( )
420
425
. append ( 'text' )
421
426
. classed ( 'axisTitle' , true )
422
- . attr ( 'transform' , function ( d ) { return 'translate(0,' + - ( d . model . filterBar . handleheight + 20 ) + ')' ; } )
427
+ . attr ( 'transform' , 'translate(0,' + - ( filterBar . handleheight + 20 ) + ')' )
423
428
. text ( function ( d ) { return d . label ; } )
424
429
. attr ( 'text-anchor' , 'middle' )
425
430
. style ( 'font-family' , 'sans-serif' )
@@ -440,7 +445,7 @@ module.exports = function(root, styledData, layout, callbacks) {
440
445
axisExtentTop . enter ( )
441
446
. append ( 'g' )
442
447
. classed ( 'axisExtentTop' , true )
443
- . attr ( 'transform' , function ( d ) { return 'translate(' + 0 + ',' + - ( d . model . filterBar . handleheight - 2 ) + ')' ; } ) ;
448
+ . attr ( 'transform' , 'translate(' + 0 + ',' + - ( filterBar . handleheight - 2 ) + ')' ) ;
444
449
445
450
var axisExtentTopText = axisExtentTop . selectAll ( '.axisExtentTopText' )
446
451
. data ( repeat , keyFun ) ;
@@ -462,7 +467,7 @@ module.exports = function(root, styledData, layout, callbacks) {
462
467
axisExtentBottom . enter ( )
463
468
. append ( 'g' )
464
469
. classed ( 'axisExtentBottom' , true )
465
- . attr ( 'transform' , function ( d ) { return 'translate(' + 0 + ',' + ( d . model . height + d . model . filterBar . handleheight - 2 ) + ')' ; } ) ;
470
+ . attr ( 'transform' , function ( d ) { return 'translate(' + 0 + ',' + ( d . model . height + filterBar . handleheight - 2 ) + ')' ; } ) ;
466
471
467
472
var axisExtentBottomText = axisExtentBottom . selectAll ( '.axisExtentBottomText' )
468
473
. data ( repeat , keyFun ) ;
@@ -498,8 +503,8 @@ module.exports = function(root, styledData, layout, callbacks) {
498
503
499
504
axisBrushEnter
500
505
. selectAll ( 'rect' )
501
- . attr ( 'x' , function ( ) { var d = this . parentElement . parentElement . __data__ ; return - d . model . brushCaptureWidth / 2 ; } )
502
- . attr ( 'width' , function ( ) { var d = this . parentElement . parentElement . __data__ ; return d . model . brushCaptureWidth ; } ) ;
506
+ . attr ( 'x' , - filterBar . capturewidth / 2 )
507
+ . attr ( 'width' , filterBar . capturewidth ) ;
503
508
504
509
axisBrushEnter
505
510
. selectAll ( 'rect.extent' )
@@ -509,17 +514,17 @@ module.exports = function(root, styledData, layout, callbacks) {
509
514
510
515
axisBrushEnter
511
516
. selectAll ( '.resize rect' )
512
- . attr ( 'height' , function ( ) { var d = this . parentElement . parentElement . __data__ ; return d . model . resizeHeight ; } )
517
+ . attr ( 'height' , filterBar . handleheight )
513
518
. attr ( 'opacity' , 0 )
514
519
. style ( 'visibility' , 'visible' ) ;
515
520
516
521
axisBrushEnter
517
522
. selectAll ( '.resize.n rect' )
518
- . attr ( 'y' , function ( ) { var d = this . parentElement . parentElement . __data__ ; return - d . model . resizeHeight + d . model . filterBar . handleoverlap ; } ) ;
523
+ . attr ( 'y' , filterBar . handleoverlap - filterBar . handleheight ) ;
519
524
520
525
axisBrushEnter
521
526
. selectAll ( '.resize.s rect' )
522
- . attr ( 'y' , function ( ) { var d = this . parentElement . parentElement . __data__ ; return - d . model . filterBar . handleoverlap ; } ) ;
527
+ . attr ( 'y' , filterBar . handleoverlap ) ;
523
528
524
529
var justStarted = false ;
525
530
var contextShown = false ;
0 commit comments