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(); 

而且還刪除多餘的，不必要的刷子。

工作叉的小提琴在這裏：http://jsfiddle.net/gordonwoodhull/uy7dqwr5/29/

我還想補充一點，這是不是真的要做範圍/集中圖表，所以請使用其他實例以正確的方式 - 這是大部分的例子如何應用日期範圍。

範圍圖表過濾自身並在重置後保持過濾狀態的奇怪行爲來自焦點圖表，使用距離圖表中的不同維度 - 通常您希望它們在同一維度上，因此它們不會觀察彼此。但這不是這個已經有幾年歷史的問題的重點，所以我現在不打算解決這個問題。