Javascript dc.js模拟点击图表并触发过滤器
我想做什么: 我有一个条形图,其中x轴代表时间。你可以用鼠标选择一段时间,所有图表都会根据选择正确调整 然而,有时很难从一个确切的日期到另一个确切的日期,我想添加一个日历,人们可以在其中选择这些日期 理想情况下,在日历上选择日期应具有与在条形图上使用鼠标选择时间段相同的效果 尝试过但不喜欢: 我尝试创建第二个时间维度,并让日历在该维度上进行选择。但是,这会使条形图的“最小值”和“最大值”调整为该选择。条形图不会覆盖时间维度的完整维度,而只覆盖日历上选定的时段。这是我想要避免的 如何准确模拟图表本身上的选择 非常感谢 编辑: 我试图理解对评论提出的建议。让我给你看一些代码 我有一个柱状图:Javascript dc.js模拟点击图表并触发过滤器,javascript,d3.js,dc.js,crossfilter,Javascript,D3.js,Dc.js,Crossfilter,我想做什么: 我有一个条形图,其中x轴代表时间。你可以用鼠标选择一段时间,所有图表都会根据选择正确调整 然而,有时很难从一个确切的日期到另一个确切的日期,我想添加一个日历,人们可以在其中选择这些日期 理想情况下,在日历上选择日期应具有与在条形图上使用鼠标选择时间段相同的效果 尝试过但不喜欢: 我尝试创建第二个时间维度,并让日历在该维度上进行选择。但是,这会使条形图的“最小值”和“最大值”调整为该选择。条形图不会覆盖时间维度的完整维度,而只覆盖日历上选定的时段。这是我想要避免的 如何准确模拟图表本
var moveChart = dc.barChart("#move-chart","chart2");
这是一个一刷上执行时间过滤器
moveChart
.width(700)
...
.dimension(timeDim)
.group(foo)
现在,假设我在控制台上执行以下操作:
timeDim.filterRange([minTime,maxTime]);
dc.renderAll("chart2");
这会使其他图表反映所选内容,而不是移动图表
我也试着实现戈登的评论,但我不知道我是否理解。在控制台中,我可以看到moveChart.filters。不实现任何过滤器,如RangedFilter或TwomensionalFilter,因此我不确定如何在笔刷上执行过滤功能
谢谢。,所以我想你真的想要刷子选项
filter = dc.filters.RangedFilter(filter[0], filter[1]);
moveChart.filter(filter);
您只需在图表上设置过滤器;图表将在维度上设置过滤器。如果您只是使用日历在条形图上使用的相同维度上进行过滤,会怎么样?显示一些代码。以身作则。帮助我们来帮助你。@EthanJewett说了什么。此外,如果希望图表根据日期范围更新画笔,则可以使用图表的过滤功能。画笔只适用于范围,但不适用于不相交的日期。感谢您的回答,我用一些代码更新了问题,但我仍然不确定我需要做什么。timeDim.filterRange采用2元素数组,而不是2个参数。我想你也要更新moveChart上的笔刷位置吗?正如@Gordon所说,dc.js提供了一个函数来实现这一点。我认为
timeDim.filterrage([minTime,maxTime]);过滤器([minTime,maxTime]);伦德拉尔特区(“图表2”)代码>可能会起作用。如果您创建一个能够显示问题的工作示例(使用JSFIDLE或类似的平台),这将非常有效。这正是我想要的,非常感谢。但是链接似乎不起作用。太好了!修复了链接。过滤器类的设计有点奇怪,但我不知道该怎么办。我想通过阅读文档(可能不够仔细)我不清楚的是,chart.filter()将类dc.filters的参数对象作为参数,所以我在试图找出如何在图表本身上执行过滤时有点迷茫。啊,好的观点。这仅从新的过滤器侧记录。图表没有说明他们使用了什么过滤器,。过滤器将更改画笔。