DC.js中的日期过滤器 [英] Date Filters in DC.js

问题描述

我正在使用DC.js，并且尝试将预设的日期过滤器添加到此 jsfiddler a>。

I am working with DC.js and I am trying to add preset date filters to this 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？

I have got the brush extent to move but I can't get it to trigger the filtering. I tried moveChart.redraw(); dc.redrawAll(); dc.renderAll();, and a few others with no luck. I have seen examples using just D3, and the logic gets hard to follow as I am trying to understand what a group object in DC would be in D3. Where I get lost is understanding the Brush Events especially with DC. I can't find any DC sample that works with the brush like this. Can someone notice what I am missing to make this work DC?

推荐答案

我认为这里的主要问题是， d3代码与dc.js代码。你不需要在使用dc.js时创建自己的画笔对象，因为它已经创建了一个，并且 .filter（）方法已经绑定到画刷它使用。

I think the main problem here is that you are mixing straight d3 code with dc.js code. You don't need to create your own brush object when using dc.js, because it already creates one, and the .filter() method is already tied to the brush that it uses.

您也不需要自己过滤数据，因为这正是crossfilter的用途。它看起来像是你过滤的原始数据数组，这没有效果，因为crossfilter已经将其复制到其内部缓冲区。

You also don't need to filter the data yourself, because that's exactly what crossfilter is for. It looked like you were filtering the original data array, which has no effect because crossfilter has already copied it into its internal buffers.

另一个诀窍是使用 dc.filters.RangedFilter 对象，以便dc.js知道范围是打算的，而不是两个离散的日期。

The other trick is to use the dc.filters.RangedFilter object when filtering, so that dc.js knows that a range is intended and not two discrete dates.

因此，而不是你的 drawBrush 函数的大部分，只是

So, instead of most of the body of your drawBrush function, just do

timeChart.filter(null);
timeChart.filter(dc.filters.RangedFilter(new Date(st), new Date(end)));
dc.redrawAll();

也可移除额外的不需要的画笔。

And also remove the extra, unneeded brush.

您的小提琴的工作叉在这里： http://jsfiddle.net/gordonwoodhull/uy7dqwr5/29 /

Working fork of your fiddle here: http://jsfiddle.net/gordonwoodhull/uy7dqwr5/29/

我还补充说，这不是真正的方法来做范围/焦点图，所以请使用其他例子 - 这是主要是如何应用日期范围的示例。

I'd also add that this is not really the right way to do range/focus charts, so please use other examples for that - this is mostly an example of how to apply date ranges.

范围图表过滤本身的奇怪行为，并在重置后保持过滤，来自焦点图表，使用不同的维度形成范围图表 - 通常你想要它们在相同的维度上，因此它们不彼此观察。但这不是这个问题的焦点，这已经是一个几岁，所以我现在不打算解决。

The strange behavior of the range chart filtering itself, and staying filtered after it's been reset, comes from the focus chart using a different dimension form the range chart - ordinarily you want them on the same dimension so they don't observe each other. But that wasn't the focus of this question, which is already a couple of years old, so I'm not going to fix that now.

这篇关于DC.js中的日期过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！