js fiddle :
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();
});
过滤精确:
d.filter(d.dimension().top(20)[0]);
我还尝试绕过图表并直接在维度上应用过滤器:
d.dimension().filterFunction(function (d) {
return d.getTime() > start.valueOf() && d.getTime() < end.valueOf()
});
我所做的一切都不会导致图表发生变化。
我开始认为我对过滤器功能应该做什么有错误的期望?
如何手动过滤维度中的数据以更新图表?
我不想用刷子。
我将根据不同的标准过滤数据,我只是想让简单的案例先工作。
我现在已经花了几天的时间,我不知道接下来要尝试什么。
任何帮助将不胜感激。
最佳答案
您是否尝试在设置 crossfilter 过滤器后重置图形的 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)
关于d3.js - 在 dc.js/Crossfilter 中添加过滤器不更新图表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17674536/