我正在使用DC.js,我正在尝试向此jsfiddler添加预设日期过滤器。
<div id="header" class='row logoSize'>
<img src="logo-main2.png" />
<div class="buttons-container"></div>
<div class="startEnd" id="start">2015-02-12</div>
<div class="startEnd" id="end">2015-02-17</div>
<div class="startEnd" id="brushYears">gggg</div>
</div>
<div class='row '>
<div class="dc-data-count">
<h2>
Card Activity Report
<span>
<span class="filter-count"></span>
selected out of
<span class="total-count"></span>
records
<span id="titleCount"></span>
<a class="btn btn-sm btn-success" href="javascript:dc.filterAll(); dc.renderAll();">Reset All</a>
</h2>
</div>
</div>
<div class='row'>
<div class='span12' id='dc-time-chart'>
<h4>
Activity counts per Day
<span class="muted pull-right" style="margin-right: 115px; ">From the chart below select a date range to filter by
<a class="reset btn btn-sm btn-success"
href="javascript:timeChart.filterAll();dc.redrawAll();"
style="display: none;">
reset
</a>
</span>
</h4>
</div>
<div class="clearfix"></div>
</div>
<div class="row">
<div id="daily-move-chart">
<div class="clearfix"></div>
</div>
</div>
</div>
<pre id="data">
ID,Action,AuditDate,DataProvider,MachineName,UserName,PersonID,Count
我有移动画笔的范围,但我不能让它触发过滤。
我试过moveChart.redraw(); dc.redrawAll(); dc.renderAll();
,还有一些没有运气。我看过使用D3的例子,当我试图理解DC中的组对象在D3中时,逻辑很难理解。我迷路的地方是了解刷机事件,尤其是DC。我找不到像这样使用刷子的任何DC样本。有人可以注意到我缺少什么使这项工作DC吗?
答案 0 :(得分:6)
我认为这里的主要问题是您将直接d3代码与dc.js代码混合。在使用dc.js时,您不需要创建自己的画笔对象,因为它已经创建了一个,.filter()
方法已经绑定到它使用的画笔。
您也不需要自己过滤数据,因为这正是crossfilter的用途。看起来你正在过滤原始数据数组,因为crossfilter已经将其复制到内部缓冲区中,因此无效。
另一个技巧是在过滤时使用dc.filters.RangedFilter
对象,以便dc.js知道范围是有意的而不是两个离散日期。
因此,只需执行
,而不是drawBrush
函数的大部分内容
timeChart.filter(null);
timeChart.filter(dc.filters.RangedFilter(new Date(st), new Date(end)));
dc.redrawAll();
并删除额外的,不需要的刷子。
你小提琴的工作叉:https://jsfiddle.net/gordonwoodhull/mr56bswz/1/
我还补充一点,这不是真正做范围/焦点图表的正确方法,所以请使用其他示例 - 这主要是如何应用日期范围的示例。
范围图表过滤本身的奇怪行为,以及在重置之后保持过滤,来自焦点图表使用范围图表中的不同维度 - 通常您希望它们在同一维度上,因此他们不会#39;互相观察。但这不是这个问题的焦点,已经有几年了,所以我现在不打算解决这个问题。