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

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. Когда пользователь выбирает дату, которую я пытаюсь добавить фильтр к диаграмме, фильтр добавляется, но диаграмма не изменяется, даже если I redraw() или render().

это, как crossfilter это настройка:

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

функция фильтрации:

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

ничто из того, что я сделал, не заставляет диаграмму меняться.

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

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

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

любая помощь была бы весьма признательна.

1 ответов


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

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

.икс.(.).измерение.(..).группа.(..)

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

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

$('#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#group-map-reduce

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

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