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

jsFiddle：

我已经建立了一个条形图，用图表显示用户每天的出行次数

        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控件对其进行过滤。 当用户选择我试图将筛选器添加到图表的日期时，会添加筛选器，但图表不会更改，即使我

重新绘制（）

或

渲染（）

以下是交叉过滤器的设置方式：

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.dimension().filterFunction(function (d) {
  return d.getTime() > start.valueOf() && d.getTime() < end.valueOf()
});

d.dimension（）.filterFunction（函数（d）{
返回d.getTime（）>start.valueOf（）&&d.getTime（）

我所做的一切都不会导致图表发生变化

我开始认为我对过滤函数应该做什么有错误的期望

如何手动筛选维度中的数据以更新图表？ 我不想用刷子。 我将根据不同的标准过滤数据，我只是想先让简单的案例起作用

我已经花了几天时间在这上面了，我不知道下一步该怎么做

---

非常感谢您的帮助。

在设置交叉过滤器后，您是否尝试重置图形的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()
});

根据评论中的讨论，更好的答案是将过滤器添加到维度，而不是图表

最后，我们需要认识到

注意：分组与交叉过滤器的当前过滤器相交，关联维度的过滤器除外。因此，组方法只考虑满足除此维度滤波器之外的每个滤波器的记录。因此，如果付款的交叉筛选按类型和总额进行筛选，则“按总额分组”仅按类型进行筛选

---

（另请参见）

谢谢，我注释掉了在更新的JSFIDLE中应用过滤器的那一行，图形仍然更改。更改X轴比例似乎对条形图有效，但我认为它不会过滤底层数据。我特别询问过滤器，因为我希望它能与所有dc js图表一起工作。x轴的另一个问题是，我不能像filterFunction提供的那样做更复杂的过滤器。谢谢你的回答，我明白你的意思。让我再试一次：）。将过滤器添加到维度而不是图表中似乎会产生不同。对你有用吗？这有点帮助，因为我可以看到过滤器可以更新图表。问题是创建了一个额外的维度，它不能回答为什么我不能在startDate对象上进行筛选。我用过滤函数更新了fiddle，在日志中你可以看到元素的数量从13到9，但是图表没有更新。好吧，我现在真的迷路了。更新其他维度上的筛选器将更新图形，但如果您更新图形设置时使用的维度，则不会更新？答案来自dc js用户组：谢谢你的帮助，upi给了我一些有价值的建议。如果你用附加信息更新你的答案，我会接受。

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