2017-03-17 1 views
1

最近、dc.jsを使用している円グラフが正しく更新されていません。 dimension.filterAll()は正常に動作し、dc.renderAll()はページを更新してグラフを再描画しますが、グラフにはフィルタリング対象のデータが反映されません。 ここにコードがあります。dc.js pieChartがfilterAll()の後に更新されない

<script> 
var data = [{date: "2011-11-14T16:17:54Z", quantity: 2, total: 190, tip: 100, type: "tab"}, 
      {date: "2011-11-14T16:20:19Z", quantity: 2, total: 190, tip: 100, type: "tab"}, 
      {date: "2011-11-14T16:28:54Z", quantity: 1, total: 300, tip: 200, type: "visa"}, 
      {date: "2011-11-14T16:30:43Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T16:48:46Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T16:53:41Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T16:54:06Z", quantity: 1, total: 100, tip: 0, type: "cash"}, 
      {date: "2011-11-14T16:58:03Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T17:07:21Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T17:22:59Z", quantity: 2, total: 90, tip: 0, type: "tab"}, 
      {date: "2011-11-14T17:25:45Z", quantity: 2, total: 200, tip: 0, type: "cash"}, 
      {date: "2011-11-14T17:29:52Z", quantity: 1, total: 200, tip: 100, type: "visa"}]; 

    var parseDate = d3.time.format("%m/%d/%Y").parse; 
    data.forEach(function (d) { 
     d.date = parseDate(d.date); 
     d.total = d.http_404 + d.http_200 + d.http_302; 
     d.Year = d.date.getFullYear(); 
    }); 
    var yearDim; 
    $(document).ready(function() { 
     var cx = crossfilter(data); 

     yearDim = cx.dimension(function (d) { return d.Year; });    
     var yearGroup = yearDim.group().reduce(
        function (p, v) { 
         ++p.count; 
         return p; 
        }, 
        function (p, v) { 
         --p.count; 
         return p; 
        }, 
        function() { 
         return { 
          count: 0 
         }; 
        } 
        ); 

     mypie = dc.pieChart('#pie-chart'); 
     mypie 
      .dimension(yearDim) 
      .group(yearGroup) 
      .valueAccessor(function (d) { 
       return d.value.count; 
      }); 

     dc.renderAll(); 
    }); 

    function resetYear() { 
     yearDim.filterAll(); 
     dc.redrawAll(); 
     dc.renderAll(); 

    } 
</script> 
<body> 
<div class="container-fluid"> 
    <div>    
     <button type="button" onclick="resetYear();">Year</button> 
    </div> 
</div> 
</body> 

答えて

0

あなたは時にフィルタの変更チャートを伝える必要があります - それはそれは(mypie.filter(null)の代わりyearDim.filterAll()で)チャートを通じての寸法を操作することは常に良いでしょう理由です。

理由:現在のところ、クロスフィルタにゲッターがないため、dc.jsは現在のフィルタ状態のミラーを維持する必要があります。

-

dc.redrawAll()は十分なはずの余分な動きを引き起こすこと、およびmypie.redrawGroup()は、より具体的である。また、フィルタを変更するとき、あなたはdc.renderAll()する必要はありません。)

関連する問題