Adding a filter to dc.js / Crossfilter without updating the chart

Question

jsFiddle: http://jsfiddle.net/PYeFP/

I have a histogram that shows how many graphs the number of users per day

tripVolume = dc.barChart("#trip-volume") .width(980) // (optional) define chart width, :default = 200 .height(75) // (optional) define chart height, :default = 200 .transitionDuration(0) // (optional) define chart transition duration, :default = 500 .margins({ top: 10, right: 50, bottom: 30, left: 40 }) .dimension(tripsByDateDimension) // set dimension .group(tripsByDateGroup) // set group // (optional) whether chart should rescale y axis to fit data, :default = false .elasticY(false) // (optional) whether chart should rescale x axis to fit data, :default = false .elasticX(false) // define x scale .x(d3.time.scale().domain([tripsByDateDimension.bottom(1)[0].startDate, tripsByDateDimension.top(1)[0].startDate ])) // (optional) set filter brush rounding .round(d3.time.day.round) // define x axis units .xUnits(d3.time.days) // (optional) whether bar should be center to its x value, :default=false .centerBar(true) // (optional) render horizontal grid lines, :default=false .renderHorizontalGridLines(true) // (optional) render vertical grid lines, :default=false .renderVerticalGridLines(true) .brushOn(false); 

The graph displays everything, but I would like to filter it using some jQuery controls. When the user selects the date that I am trying to add to the chart, the filter is added, but the chart does not change, even if I am redraw() or render() .

This sets up the cross filter:

 tripsCx = crossfilter(data.rows); var allTripsGroup = tripsCx.groupAll(); var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; }); var tripsByDateGroup = tripsByDateDimension.group(d3.time.day); 

Listed below are some of the methods that I used to try to apply a filter:

This should use filterRange:

 d.filter(d.dimension().top(20)[19], d.dimension().top(20)[0]); 

FilterFunction:

 d.filter(function (d) { return d.getTime() > start.valueOf() && d.getTime() < end.valueOf(); }); 

FilterExact:

 d.filter(d.dimension().top(20)[0]); 

I also tried going around the chart and applying a filter directly to the size:

 d.dimension().filterFunction(function (d) { return d.getTime() > start.valueOf() && d.getTime() < end.valueOf() }); 

None of what I did leads to a change in the diagram.

Am I starting to think that I have the wrong expectation of what a filter function should do?

How can I manually filter the data in a dimension to update the chart? I do not want to use a brush. I will filter the data based on different criteria, I'm just trying to fulfill a simple case first.

I spent a couple of days on it now, and I don’t understand what to do next.

Any help would be greatly appreciated.

Answer 1

Have you tried resetting your graph property x after setting the crossfilter filter

I have a somewhat similar case, and what I do after each action that modifies the filtered values ​​is something like strings

.x (..). The size (...). Group (...)

after creating / setting filters

Tried to do something like that

 $('#filter').on('click', function(){ var minDate = tripsByDateDimension.top(5)[4].startDate; var maxDate = tripsByDateDimension.top(5)[0].startDate; console.log(tripVolume.filters()); tripVolume.filter([minDate, maxDate]); tripVolume.x(d3.time.scale().domain([minDate,maxDate])); console.log(tripVolume.filters()); dc.redrawAll() }); 

http://jsfiddle.net/PYeFP/5/

The best answer to the discussion in the comment is to add a filter to the dimension, not to the chart

Finally, you need to understand what is mentioned in https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce

Note: the grouping crosses the cross-filter filters, except for the corresponding size filter. Thus, group methods only consider records that satisfy each filter, except for this size filter. Thus, if the cross payment filter is filtered by type and amount, then the group by amount only watches the filter by type.

(see also https://groups.google.com/d/msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J )