Добавление фильтра в dc.js / Crossfilter без обновления диаграммы

Question

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

У меня настроена гистограмма, которая отображает количество поездок пользователей за день

        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);

График отображается нормально, но я хотел бы отфильтровать его, используя некоторые элементы управления jQuery. Когда пользователь выбирает дату, когда я пытаюсь добавить фильтр на график, фильтр добавляется, но график не меняется, даже если я redraw() или же render(),

Вот как настроен перекрестный фильтр:

tripsCx = crossfilter(data.rows);
var allTripsGroup = tripsCx.groupAll();

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

Ниже приведены некоторые методы, которые я использовал, чтобы попытаться применить фильтр:

Это должно использовать 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]);

Я также попытался обойти диаграмму и применить фильтр непосредственно к измерению:

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

Ничто из того, что я сделал, не приводит к изменению графика.

Я начинаю думать, что у меня неправильное ожидание того, что должна делать функция фильтра?

Как вручную отфильтровать данные в измерении, чтобы обновить диаграмму? Я не хочу использовать кисть. Я буду фильтровать данные, основываясь на разных критериях, я просто пытаюсь сначала разобраться с простым делом.

Я потратил пару дней на это сейчас, и я не знаю, что делать дальше.

Любая помощь будет принята с благодарностью.

Answer 1

Вы пытались сбросить свойство x графика после установки фильтра перекрестного фильтра

У меня есть несколько похожий случай, и то, что я делаю после каждого действия, которое изменяет отфильтрованные значения, является чем-то вроде

.x(..). размер (...). группа (...)

после создания / настройки фильтров

Пытался сделать что-то подобное

$('#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/

Лучшим ответом на обсуждение в комментарии является добавление фильтра к измерению, а не к диаграмме.

Наконец, нужно понять, что упоминается в https://github.com/square/crossfilter/wiki/API-Reference

Примечание. Группировка пересекает текущие фильтры перекрестного фильтра, за исключением фильтра соответствующего измерения. Таким образом, групповые методы рассматривают только записи, которые удовлетворяют каждому фильтру, кроме фильтра этого измерения. Таким образом, если перекрестный фильтр платежей фильтруется по типу и итоговому значению, тогда группировка по итоговому показателю учитывает только фильтр по типу.

(также см. https://groups.google.com/d/msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J)