Is the brush selection handle radius configurable? - dc.js

Question

I've been testing the following example on tablets & phones:
http://dc-js.github.io/dc.js/examples/filtering.html
Everything is great apart from when I do a brush selection on the bar chart then try to modify the range by dragging one of the handles. You have to be precise to catch the handle. If you miss it, you either drag the range or you cancel the current range and start a new range.
So is there a way to expand the selection radius around the brush selection handles?

Answer 1

Looks like there is an option for this in d3v4, so this will get easier when dc.js is upgraded.
For now, we can guess what d3v3 is doing and use a pretransition event handler to modify the brushes before they're rendered. We can also replace the visual representation.
In d3v3, the brush width seems to be hard coded at 6 with an x offset of -3:
I can't explain why this seems to align perfectly with the right brush handle but seems to be a few pixels off for the left brush handle. In experimenting with this, it seems like it the offset should probably be -6 for the left (west) handle and 0 for the right (east) handle, so maybe dc.js could benefit from the techniques shown here.
Anyway, let's double the width. Our pretransition handler will set the width to 12, and set the offset to -12 for the west and 0 for the east handle:
spendHistChart.on('pretransition.bighandle', function(chart) {
chart.selectAll('g.brush .resize.w rect')
.attr('x', -12)
.attr('width', 12);
chart.selectAll('g.brush .resize.e rect')
.attr('x', 0)
.attr('width', 12);
});
Now, for fun and bonus points, we can also make the handles bigger. Here's a previous answer where we modified the brush path.
Similarly, we can override resizeHandlePath and basically double every X coordinate, as well as doubling the height of the arcs that make up the top and bottom of the handles:
dc.override(spendHistChart, 'resizeHandlePath', function (d) {
var e = +(d === 'e'), x = e ? 1 : -1, y = spendHistChart.effectiveHeight() / 3;
return 'M' + (0.5 * x) + ',' + y +
'A12,12 0 0 ' + e + ' ' + (13 * x) + ',' + (y + 12) +
'V' + (2 * y - 12) +
'A12,12 0 0 ' + e + ' ' + (1 * x) + ',' + (2 * y) +
'Z' +
'M' + (5 * x) + ',' + (y + 14) +
'V' + (2 * y - 14) +
'M' + (9 * x) + ',' + (y + 14) +
'V' + (2 * y - 14);
});
And voilà! Big handles with a lot of area to grab onto: