Skip to content

Commit b477753

Browse files
monferamonfera
committed
GUPified the other parcoords-specific attributes
1 parent fab7584 commit b477753

File tree

1 file changed

+70
-53
lines changed

1 file changed

+70
-53
lines changed

‎src/traces/parcoords/parcoords.js

Lines changed: 70 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,12 @@ function domainToUnitScale(values) {
6767
return d3.scale.linear().domain(extent);
6868
}
6969

70-
function viewModel(lines, width, height, canvasPixelRatio, model) {
70+
function viewModel(model) {
71+
72+
var lines = model.lines;
73+
var width = model.width;
74+
var height = model.height;
75+
var canvasPixelRatio = model.canvasPixelRatio;
7176

7277
var xScale = d3.scale.ordinal().domain(d3.range(model.dimensions.filter(visible).length)).rangePoints([0, width], 0);
7378

@@ -130,38 +135,50 @@ module.exports = function(root, styledData, layout, callbacks) {
130135

131136
var data = styledData.dimensions;
132137

138+
var canvasPixelRatio = styledData.lines.pixelratio;
139+
var lines = Lib.extendDeep(styledData.lines, {
140+
color: styledData.line.color.map(domainToUnitScale(styledData.line.color)),
141+
canvasOverdrag: overdrag * canvasPixelRatio
142+
});
143+
144+
var layoutWidth = layout.width * (styledData.domain.x[1] - styledData.domain.x[0]);
145+
var layoutHeight = layout.height * (styledData.domain.y[1] - styledData.domain.y[0]);
146+
147+
var padding = styledData.padding || 80;
148+
var translateX = (styledData.domain.x[0] || 0) * layout.width;
149+
var translateY = (styledData.domain.y[0] || 0) * layout.height;
150+
var width = layoutWidth - 2 * padding - legendWidth; // leavig room for the colorbar
151+
var height = layoutHeight - 2 * padding;
152+
153+
var canvasWidth = width * canvasPixelRatio + 2 * lines.canvasOverdrag;
154+
var canvasHeight = height * canvasPixelRatio;
155+
156+
var resizeHeight = styledData.filterbar.handleheight;
157+
var brushVisibleWidth = styledData.filterbar.width;
158+
var brushCaptureWidth = styledData.filterbar.capturewidth || Math.min(32, brushVisibleWidth + 16);
159+
133160
return [
134161
{
135162
key: Math.random(),
136163
dimensions: data,
137164
tickDistance: styledData.tickdistance,
138-
unitToColor: styledData.unitToColor
165+
unitToColor: styledData.unitToColor,
166+
lines: lines,
167+
translateX: translateX,
168+
translateY: translateY,
169+
padding: padding,
170+
canvasWidth: canvasWidth,
171+
canvasHeight: canvasHeight,
172+
width: width,
173+
height: height,
174+
brushVisibleWidth: brushVisibleWidth,
175+
brushCaptureWidth: brushCaptureWidth,
176+
resizeHeight: resizeHeight,
177+
canvasPixelRatio: canvasPixelRatio
139178
}
140179
];
141180
}
142181

143-
var canvasPixelRatio = styledData.lines.pixelratio;
144-
var lines = Lib.extendDeep(styledData.lines, {
145-
color: styledData.line.color.map(domainToUnitScale(styledData.line.color)),
146-
canvasOverdrag: overdrag * canvasPixelRatio
147-
});
148-
149-
var layoutWidth = layout.width * (styledData.domain.x[1] - styledData.domain.x[0]);
150-
var layoutHeight = layout.height * (styledData.domain.y[1] - styledData.domain.y[0]);
151-
152-
var padding = styledData.padding || 80;
153-
var translateX = (styledData.domain.x[0] || 0) * layout.width;
154-
var translateY = (styledData.domain.y[0] || 0) * layout.height;
155-
var width = layoutWidth - 2 * padding - legendWidth; // leavig room for the colorbar
156-
var height = layoutHeight - 2 * padding;
157-
158-
var canvasWidth = width * canvasPixelRatio + 2 * lines.canvasOverdrag;
159-
var canvasHeight = height * canvasPixelRatio;
160-
161-
var resizeHeight = styledData.filterbar.handleheight;
162-
var brushVisibleWidth = styledData.filterbar.width;
163-
var brushCaptureWidth = styledData.filterbar.capturewidth || Math.min(32, brushVisibleWidth + 16);
164-
165182
function enterSvgDefs(root) {
166183
var defs = root.selectAll('defs')
167184
.data(repeat, keyFun);
@@ -175,9 +192,9 @@ module.exports = function(root, styledData, layout, callbacks) {
175192
filterBarPattern.enter()
176193
.append('pattern')
177194
.attr('id', 'filterBarPattern')
178-
.attr('width', brushCaptureWidth)
179-
.attr('height', height)
180-
.attr('x', -brushVisibleWidth)
195+
.attr('width', function(d) {return d.model.brushCaptureWidth;})
196+
.attr('height', function(d) {return d.model.height})
197+
.attr('x', function(d) {return -d.model.brushVisibleWidth;})
181198
.attr('patternUnits', 'userSpaceOnUse');
182199

183200
var filterBarPatternGlyph = filterBarPattern.selectAll('rect')
@@ -186,9 +203,9 @@ module.exports = function(root, styledData, layout, callbacks) {
186203
filterBarPatternGlyph.enter()
187204
.append('rect')
188205
.attr('shape-rendering', 'crispEdges')
189-
.attr('width', brushVisibleWidth)
190-
.attr('height', height)
191-
.attr('x', brushVisibleWidth / 2)
206+
.attr('width', function(d) {return d.model.brushVisibleWidth})
207+
.attr('height', function(d) {return d.model.height})
208+
.attr('x', function(d) {return d.model.brushVisibleWidth / 2;})
192209
.attr('fill', styledData.filterbar.fillcolor)
193210
.attr('fill-opacity', styledData.filterbar.fillopacity)
194211
.attr('stroke', styledData.filterbar.strokecolor)
@@ -202,24 +219,24 @@ module.exports = function(root, styledData, layout, callbacks) {
202219
parcoordsModel.enter()
203220
.append('div')
204221
.style('position', 'relative')
205-
//.style('height', '500px')
206222
.classed('parcoordsModel', true);
207223

208224
var parcoordsViewModel = parcoordsModel.selectAll('.parcoordsViewModel')
209-
.data(viewModel.bind(0, lines, width, height, canvasPixelRatio), keyFun);
225+
.data(viewModel, keyFun);
210226

211227
parcoordsViewModel.enter()
212228
.append('div')
213229
.classed('parcoordsViewModel', true)
214-
.style('transform', 'translate(' + translateX + 'px,' + translateY + 'px)');
230+
.style('transform', function(d) {return 'translate(' + d.model.translateX + 'px,' + d.model.translateY + 'px)';});
215231

216232
var parcoordsLineLayer = parcoordsViewModel.selectAll('.parcoordsLineLayer')
217233
.data(function(vm) {
218234
return [true, false].map(function(context) {
219235
return {
220236
key: context ? 'contextLineLayer' : 'focusLineLayer',
221237
context: context,
222-
viewModel: vm
238+
viewModel: vm,
239+
model: vm.model
223240
};
224241
});
225242
}, keyFun);
@@ -232,18 +249,18 @@ module.exports = function(root, styledData, layout, callbacks) {
232249
.style('clear', 'both')
233250
.style('position', function(d, i) {return i > 0 ? 'absolute' : 'static'})
234251
.style('left', 0)
235-
.style('padding', padding + 'px')
252+
.style('padding', function(d) {return d.viewModel.model.padding + 'px';})
236253
.style('overflow', 'visible')
237-
.attr('width', canvasWidth)
238-
.attr('height', canvasHeight)
239-
.style('width', (width + 2 * overdrag) + 'px')
240-
.style('height', height + 'px');
254+
.attr('width', function(d) {return d.viewModel.model.canvasWidth;})
255+
.attr('height', function(d) {return d.viewModel.model.canvasHeight;})
256+
.style('width', function(d) {return (d.viewModel.model.width + 2 * overdrag) + 'px';})
257+
.style('height', function(d) {return d.viewModel.model.height + 'px';});
241258

242259
var tweakables = {renderers: [], dimensions: []};
243260

244261
parcoordsLineLayer
245262
.each(function(d) {
246-
var lineLayer = lineLayerMaker(this, lines, canvasWidth, canvasHeight, d.viewModel.panels, d.viewModel.model.unitToColor, d.context);
263+
var lineLayer = lineLayerMaker(this, d.model.lines, d.model.canvasWidth, d.model.canvasHeight, d.viewModel.panels, d.model.unitToColor, d.context);
247264
d.viewModel[d.key] = lineLayer;
248265
tweakables.renderers.push(function() {lineLayer.render(d.viewModel.panels, true);});
249266
lineLayer.render(d.viewModel.panels, !d.context, d.context && !someFiltersActive(d.viewModel));
@@ -256,8 +273,8 @@ module.exports = function(root, styledData, layout, callbacks) {
256273
.append('svg')
257274
.classed('parcoordsControlOverlay', true)
258275
.attr('overflow', 'visible')
259-
.attr('width', width + 2 * padding)
260-
.attr('height', height + 2 * padding)
276+
.attr('width', function(d) {return d.model.width + 2 * d.model.padding;})
277+
.attr('height', function(d) {return d.model.height + 2 * d.model.padding;})
261278
.style('position', 'absolute')
262279
.style('left', 0)
263280
.style('overflow', 'visible')
@@ -269,7 +286,7 @@ module.exports = function(root, styledData, layout, callbacks) {
269286

270287
parcoordsControlView.enter()
271288
.append('g')
272-
.attr('transform', 'translate(' + padding + ',' + padding + ')')
289+
.attr('transform', function(d) {return 'translate(' + d.model.padding + ',' + d.model.padding + ')';})
273290
.classed('parcoordsControlView', true);
274291

275292
var clearFix = parcoordsViewModel.selectAll('.clearFix')
@@ -304,14 +321,14 @@ module.exports = function(root, styledData, layout, callbacks) {
304321
if(domainBrushing) {
305322
return;
306323
}
307-
d.x = Math.max(-overdrag, Math.min(width + overdrag, d3.event.x));
308-
d.canvasX = d.x * canvasPixelRatio;
324+
d.x = Math.max(-overdrag, Math.min(d.model.width + overdrag, d3.event.x));
325+
d.canvasX = d.x * d.model.canvasPixelRatio;
309326
panel
310327
.sort(function(a, b) {return a.x - b.x;})
311328
.each(function(dd, i) {
312329
dd.xIndex = i;
313330
dd.x = d === dd ? dd.x : dd.xScale(dd.xIndex);
314-
dd.canvasX = dd.x * canvasPixelRatio;
331+
dd.canvasX = dd.x * dd.model.canvasPixelRatio;
315332
});
316333
panel.filter(function(dd) {return Math.abs(d.xIndex - dd.xIndex) !== 0;})
317334
.attr('transform', function(d) {return 'translate(' + d.xScale(d.xIndex) + ', 0)';});
@@ -325,7 +342,7 @@ module.exports = function(root, styledData, layout, callbacks) {
325342
return;
326343
}
327344
d.x = d.xScale(d.xIndex);
328-
d.canvasX = d.x * canvasPixelRatio;
345+
d.canvasX = d.x * d.model.canvasPixelRatio;
329346
d3.select(this)
330347
.attr('transform', function(d) {return 'translate(' + d.x + ', 0)';});
331348
d.parent.contextLineLayer.render(d.parent.panels, false, !someFiltersActive(d.parent));
@@ -350,7 +367,7 @@ module.exports = function(root, styledData, layout, callbacks) {
350367
.append('g')
351368
.classed('axis', true)
352369
.each(function(d) {
353-
var wantedTickCount = height / d.model.tickDistance;
370+
var wantedTickCount = d.model.height / d.model.tickDistance;
354371
var scale = d.domainScale;
355372
var dom = scale.domain();
356373
d3.select(this)
@@ -440,7 +457,7 @@ module.exports = function(root, styledData, layout, callbacks) {
440457
axisExtentBottom.enter()
441458
.append('g')
442459
.classed('axisExtentBottom', true)
443-
.attr('transform', 'translate(' + 0 + ',' + (height + styledData.filterbar.handleheight - 2) + ')');
460+
.attr('transform', function(d) {return 'translate(' + 0 + ',' + (d.model.height + styledData.filterbar.handleheight - 2) + ')';});
444461

445462
var axisExtentBottomText = axisExtentBottom.selectAll('.axisExtentBottomText')
446463
.data(repeat, keyFun);
@@ -476,8 +493,8 @@ module.exports = function(root, styledData, layout, callbacks) {
476493

477494
axisBrushEnter
478495
.selectAll('rect')
479-
.attr('x', -brushCaptureWidth / 2)
480-
.attr('width', brushCaptureWidth);
496+
.attr('x', function() {var d = this.parentElement.parentElement.__data__; return -d.model.brushCaptureWidth / 2;})
497+
.attr('width', function() {var d = this.parentElement.parentElement.__data__; return d.model.brushCaptureWidth;});
481498

482499
axisBrushEnter
483500
.selectAll('rect.extent')
@@ -487,13 +504,13 @@ module.exports = function(root, styledData, layout, callbacks) {
487504

488505
axisBrushEnter
489506
.selectAll('.resize rect')
490-
.attr('height', resizeHeight)
507+
.attr('height', function() {var d = this.parentElement.parentElement.__data__; return d.model.resizeHeight;})
491508
.attr('opacity', 0)
492509
.style('visibility', 'visible');
493510

494511
axisBrushEnter
495512
.selectAll('.resize.n rect')
496-
.attr('y', -resizeHeight + styledData.filterbar.handleoverlap);
513+
.attr('y', function() {var d = this.parentElement.parentElement.__data__; return -d.model.resizeHeight + styledData.filterbar.handleoverlap;});
497514

498515
axisBrushEnter
499516
.selectAll('.resize.s rect')

0 commit comments

Comments
 (0)