在dc.js / Crossfilter中添加一个过滤器，不更新图表 [英] Adding a filter in dc.js / Crossfilter not updating the chart
问题描述
jsFiddle：
http://jsfiddle.net/PYeFP/
我有一个条形图设置，用于按日显示用户的出行次数
tripVolume = dc.barChart（＃trip-volume）
.width（980）//（可选）定义图表宽度，：default = 200
.height定义图表高度：：default = 200
.transitionDuration（0）//（可选）定义图表过渡持续时间，默认值为500
.margins（{top：10，right：50，bottom：30 ，left：40}）
.dimension（tripsByDateDimension）//设置维度
.group（tripsByDateGroup）//设置组
//（可选）图表是否应重新缩放y轴以适合数据，：default = false
.elasticY（false）
//（可选）图表是否应该重新缩放x轴以适合数据，默认= false
.elasticX（false）
// define x scale
.x（d3.time.scale（）。domain（[tripsByDateDimension.bottom（1）[0] .startDate，tripsByDateDimension.top（1）[0] .startDate]））
//（可选）设置过滤器刷圆整
.round（d3.time.day.round）
//定义x轴单位
.xUnits（d3.time.days）
//（可选）bar是否应以其x值为中心，：default = false
.centerBar（true）
//（可选）渲染水平网格线，：default = false
.renderHorizontalGridLines（true）
//（可选）渲染垂直网格线，：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]）;
FilterFunction：
code> 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（）
}）;
我做的任何事情都不会导致图表变化。
我开始认为我对过滤函数应该做的错误期望？
我如何手动过滤维度更新图表？
我不想使用画笔。
我将根据不同的标准过滤数据，我只是想让简单的案例首先工作。
我花了几个
任何帮助将非常感激。
我有一个有点过滤器的图片类似的情况，我改变过滤的值的每个动作后，我做的事情是
.x（..）。dimension（...）。 （...）
尝试执行类似
$（'＃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（）
}）;
在注释中的每个讨论更好的答案是将过滤器添加到维度，而不是图表
最后，需要实现 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 ）
jsFiddle: http://jsfiddle.net/PYeFP/
I have a bar chart set up that graphs a users number of trips by 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 fine but I would like to filter it using some jQuery controls.
When the user selects the date I am trying to add a filter to the chart, the filter gets added but the chart does not change, even if I redraw() or render().
This is how the crossfilter is setup:
tripsCx = crossfilter(data.rows);
var allTripsGroup = tripsCx.groupAll();
var tripsByDateDimension = tripsCx.dimension(function (d) { return d.startDate; });
var tripsByDateGroup = tripsByDateDimension.group(d3.time.day);
The following are some of the methods I have used to try to apply a filter:
This should use the 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 bypassing the chart and applying the filter directly on the dimension:
d.dimension().filterFunction(function (d) {
return d.getTime() > start.valueOf() && d.getTime() < end.valueOf()
});
Nothing I have done causes the chart to change.
I am beginning to think that I have the wrong expectation of what the filter function should do?
How can I manually filter the data in the dimension to have the chart updated? I don't want to use a brush. I will be filtering the data based on different criteria, I'm just trying to get the simple case working first.
I've spent a couple of days on this now and I'm at a loss as to what to try next.
Any help would be greatly appreciated.
Have you tried to reset your x property of the graph after setting the crossfilter filter
I have a somewhat similar case and what I do after each action that changes the filtered values is something along the lines of
.x(..).dimension(...).group(...)
after creating/setting the 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()
});
Better answer per the discussion in the comment is to add the filter to the dimension, not the chart
Finally, one needs to realize what is mentioned in https://github.com/square/crossfilter/wiki/API-Reference#group-map-reduce
Note: a grouping intersects the crossfilter's current filters, except for the associated dimension's filter. Thus, group methods consider only records that satisfy every filter except this dimension's filter. So, if the crossfilter of payments is filtered by type and total, then group by total only observes the filter by type.
(also see https://groups.google.com/d/msg/dc-js-user-group/UFxvUND7hmY/btbAjqIIzl8J)
这篇关于在dc.js / Crossfilter中添加一个过滤器，不更新图表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
