DC.js 中的日期过滤器

Question

我正在使用 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 吗？

Answer 1

我认为这里的主要问题是您将直接的 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();

同时删除多余的、不需要的画笔。

你的 fiddle 的工作分支在这里：https://jsfiddle.net/gordonwoodhull/mr56bswz/1/

我还要补充一点，这并不是制作 range/focus 图表的正确方法，因此请为此使用其他示例 - 这主要是如何应用日期范围的示例。

范围图过滤自身并在重置后保持过滤的奇怪行为来自焦点图表使用与范围图表不同的维度 - 通常您希望它们在同一维度上，这样它们就不会互相观察。但这不是这个问题的重点，这个问题已经有几年了，所以我现在不打算解决这个问题。

DC.js 中的日期过滤器

Date Filters in DC.js

d3.js

crossfilter

dc.js