how to zoom on brushing with dc.js - dc.js

Question

I am trying to create a simple bar chart where the X axis is a date
scale and the Y a total count of events that occurred on a date.
Additionally I’m trying to add the capability to brush and zoom into the
chart so that there would be an initial X axis for years, then months
and finally days, but I am having an awful time trying to do this.
eventData.forEach(function(d) {
d.event_stat_data_ontime = $(d.event_stat_data_ontime).text();
//get rid of time portion
var tempDate = new Date(d.event_entry_date);
d.event_entry_date = new Date(tempDate.toDateString());
});
eventData = [ {event_entry_date: "Mon Feb 05 2020 23:13:39 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
{event_entry_date: "Tue Feb 04 2020 00:14:40 GMT-0500 (Eastern Standard Time", event_type: "Type 02"},
{event_entry_date: "Thu Feb 20 2020 21:01:46 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
{event_entry_date: "Fri Feb 21 2020 21:08:20 GMT-0500 (Eastern Standard Time)", event_type: "Type 01"},
{event_entry_date: "Mon Feb 03 2020 11:12:16 GMT-0500 (Eastern Standard Time)", event_type: "Type 03"} ];
eventData.forEach(function(d) {
d.event_entry_date = new Date(d.event_entry_date);
});
var ndx = crossfilter(eventData);
var dateDim = ndx.dimension( function(d) { return d.event_entry_date; } );
var dateGroup = dateDim.group().reduceCount( function(d) { return d.event_entry_date; });
var minDate = d3.timeMonth.offset(dateDim.bottom(1)[0].event_entry_date, -1);
var maxDate = d3.timeMonth.offset(dateDim.top(1)[0].event_entry_date, 1);
timeChart
.width( $('#dc-time-chart').parent().innerWidth() )
.transitionDuration(500)
.dimension(dateDim)
.group(dateGroup)
.elasticY(true)
.x(d3.scaleTime().domain([minDate, maxDate]))
.renderHorizontalGridLines(true)

Answer 1

dc.js doesn't have any built-in feature to zoom on brushing.
I can think of a few reasons for this:
The brush in dc.js is used for selection
You either end up with the brush covering the whole chart (ugly), or you have to remove the selection brush after zooming
You have to have some other way to restore the zoom, because once you are zoomed in, there is no way to select outside the chart to zoom out
Whatever the reason, the range and focus charts are the built-in solution for this.
If you still want to hack it, you can respond to the filtered event and change the domain of the x scale:
timeChart.on('filtered', function() {
if(timeChart.filter()) {
timeChart.x().domain(timeChart.filter());
timeChart.filter(null);
timeChart.redraw();
}
})
This takes the filter, applies it to the domain, and the removes the filter. This is a solution for problem #2 above. It's kind of ugly, but not as ugly as leaving the whole chart brushed afterward. (Also once the whole chart is brushed, there's no way to brush within that.)
By itself, this will not work right because dc.js charts brush continuously, while the mouse is being dragged.
There's an old feature request to have an option to only brush on "brush end", that is, when the mouse is released. We can borrow some code from a pull request that implements this feature.
We'll add this method to change the selection without filtering:
timeChart._nonFilteredBrushing = function () {
var extent = timeChart.extendBrush();
timeChart.fadeDeselectedArea();
};
And then change the brush event handlers to only filter on brush end:
timeChart.brush().on('brush', timeChart._nonFilteredBrushing);
timeChart.brush().on('end.filter', timeChart._brushing);
Unfortunately, this step has to be done after the chart is rendered.
Finally, we'll need to add a button to reset the domain of the chart, a solution for problem #3 above:
<a href='javascript:timeChart.focus(null)'>reset</a>
Here is a demo fiddle.
As for problem #1, how do we deal with selection, since this is different from the behavior of other dc.js charts?
1. No selection or filtering in this chart. That's what I implemented here.
2. Filter to the X domain of this chart, but don't show the brush. Maybe not difficult, but might require hiding the brush instead of removing the filter.
side note: quantizing to days.
Here's the idiomatic way to bin by days, rather than creating strings and then parsing them.
Use d3.timeDay in your dimension key function:
var dateDim = ndx.dimension( function(d) { return d3.timeDay(d.event_entry_date); } );
Use d3.timeDays for your xUnits so that dc.js knows how many bars there are and how wide to make them:
.xUnits(d3.timeDays)