将刷子刷到下一个x值？ [dc.js]

Question

我有一个折线图和数据

[{
    time: "2016-4-29"
    total: 23242
},
{ 
    time: "2016-5-16
    total: 3322
}
...
]

我正在尝试使用画笔在x轴上进行过滤，但是，由于我没有每一个日期，如果我在一个小范围内刷，过滤器处理程序似乎为我的过滤器返回一个空数组

我设置了折线图的x轴，如下所示：

.x(d3.time.scale().domain([minDate,maxDate]))

有没有办法让用户只能过滤数据集中的日期？

我希望画笔能够捕捉到数据集中的日期。

似乎发生的事情是你能够在刻度之间刷。所以它不知道它选择了什么。

Answer 1

我将回答更简单的问题：如何创建一个不允许任何选择的画笔？

换句话说，如果画笔不包含数据，请不要让它拍摄。

解决方案分为两部分。首先，由于任何带有画笔的图表将删除旧过滤器，然后添加新过滤器，我们可以设置addFilterHandler以拒绝任何不包含非零箱的过滤器：

spendHistChart.addFilterHandler(function(filters, filter) {
  var binsIn = spendHistChart.group().all().filter(function(kv) {
    return filter.isFiltered(kv.key) && kv.value;
  });
  console.log('non-empty bins in range', binsIn.length);
  return binsIn.length ? [filter] : [];
});

这是直截了当的部分，顺便说一句，我认为你可以修改它以将画笔捕捉到现有数据。 （不过我没试过。）

更棘手的部分是，这不会摆脱画笔，它只是不应用过滤器。因此图表将以不一致的状态结束。

我们需要检测画笔动作何时结束，如果此时没有过滤器，请明确告诉图表清除过滤器：

spendHistChart.brush().on('brushend.no-empty', function() {
  if(!spendHistChart.filters().length)
    window.setTimeout(function() {
        spendHistChart.filterAll().redraw();
    }, 100);
});

我们需要在这里短暂延迟，因为如果我们同步回复brushend，图表可能仍会响应它，引起争吵和不满。

作为奖励，由于unintentional remove-brush animation，你会得到一种“nah-ah”动画。

demo fiddle