dc.js 模拟点击图表并触发过滤器

Question

我想做的事情：

我有一个条形图，其中 x 轴代表时间。用鼠标 select 可以 select 一段时间，所有图表都会正确调整到 selection。

但是，有时很难从确切的日期转到确切的日期，我想添加一个日历，其中可以 select 这些日期。

理想情况下，select在日历上输入日期与select在条形图上用鼠标输入时间段具有相同的效果。

试过但不喜欢：

我试图创建第二个时间维度并在其上制作日历 select。但是，这会使 barChart 的最小值和最大值调整到 selection。barChart 不会覆盖时间维度的全部维度，而只会覆盖日历上的 selected 时间段。这是我想避免的。

如何在图表本身上精确模拟 select离子？

非常感谢。

编辑：

我试图理解评论中提出的建议。让我给你看一些代码。

我有一个条形图：

var moveChart    = dc.barChart("#move-chart","chart2");

这是用来执行时间过滤器的。

moveChart
.width(700)
...
.dimension(timeDim)
.group(foo)

现在，假设我在控制台上做了：

timeDim.filterRange([minTime,maxTime]);
dc.renderAll("chart2");

这使得其他图表反映 selection，但不反映 moveChart。

我也尝试执行 Gordon 的评论，但我不明白。在控制台中，我可以看到 moveChart.filters。没有实现像RangedFilter或TwoDimensionalFilter这样的过滤器，所以我不确定如何在画笔上执行过滤器功能。

谢谢。

Answer 1

filter = dc.filters.RangedFilter(filter[0], filter[1]);
moveChart.filter(filter);

您只需要在图表上设置过滤器即可；图表将在维度上设置过滤器。

dc.js simulate click on chart and trigger filter on