首页 文章

在dc.js / Crossfilter中添加过滤器而不更新图表

提问于
浏览
6

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

这就是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]);

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

我所做的一切都没有导致图表发生变化 .

我开始认为我对滤波器功能应该做什么有错误的期望?

How can I manually filter the data in the dimension to have the chart updated? 我只是想让简单的案例先行 .

我现在已经花了几天时间,我不知道下一步该尝试什么 .

任何帮助将不胜感激 .

1 回答

  • 8

    设置了交叉滤波器后,您是否尝试重置图形的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#group-map-reduce中提到的内容

    注意:除了关联维度的过滤器之外,分组与交叉过滤器的当前过滤器相交 . 因此,组方法仅考虑满足除此维度的过滤器之外的每个过滤器的记录 . 因此,如果按类型和总计过滤付款的交叉过滤器,则按总计分组仅按类型观察过滤器 .

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

相关问题