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

过滤功能：

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(..).dimension(...).group(...)

在创建/设置过滤器之后

试图做类似的事情

$('#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中提到的内容

注意：分组与交叉过滤器的当前过滤器相交，关联维度的过滤器除外。因此，组方法只考虑满足除此维度过滤器之外的所有过滤器的记录。因此，如果支付的交叉过滤器是按类型和总计过滤的，那么按总计分组只观察按类型过滤。

（另见https://groups.google.com/d/msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J）