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

ele*_*ias 4 javascript d3.js crossfilter dc.js

我想做的事:

我有一个条形图,其中 x 轴代表时间。可以通过用鼠标选择一段时间来选择一段时间,所有图表都会根据选择正确调整。

但是,有时很难从确切日期到确切日期,我想添加一个可以选择这些日期的日历。

理想情况下,在日历上选择日期应该与在条形图上使用鼠标选择时间段具有相同的效果。

尝试过但不喜欢:

我尝试创建第二个时间维度并使日历选择它。但是,这会使 barChart 的最小值和最大值根据该选择进行调整。 barChart 不涵盖时间维度的完整维度,而仅涵盖日历上的选定时间段。这是我想避免的。

如何准确模拟图表本身的选择?

非常感谢。

编辑:

我试图理解对评论提出的建议。让我向您展示一些代码。

我有一个条形图:

var moveChart    = dc.barChart("#move-chart","chart2"); 
Run Code Online (Sandbox Code Playgroud)

这是一个用来执行时间过滤器的工具。

moveChart
.width(700)
...
.dimension(timeDim)
.group(foo) 
Run Code Online (Sandbox Code Playgroud)

现在,假设我在控制台上做:

timeDim.filterRange([minTime,maxTime]);
dc.renderAll("chart2");
Run Code Online (Sandbox Code Playgroud)

这使得其他图表反映选择,但不反映 moveChart。

我也试图实施戈登的评论,但我不明白。在控制台中,我可以看到 moveChart.filters。没有实现任何过滤器,如 RangedFilter 或 TwoDimensionalFilter,所以我不确定如何在画笔上执行过滤器功能。

谢谢。

Gor*_*don 5

图表不会在其自身维度上观察过滤器,因此我认为您确实需要画笔选项。

filter = dc.filters.RangedFilter(filter[0], filter[1]);
moveChart.filter(filter);
Run Code Online (Sandbox Code Playgroud)

范围过滤器文档

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