跟踪DC js汇总数据表中的过滤器,这些数据表用于使用可点击的行进行深入分析

时间:2018-07-15 05:51:11

标签: javascript jquery d3.js dc.js crossfilter

我创建了一个聚合数据表,该数据表使用可点击的行过滤了其他表。尝试使用DC.js聚合表创建向下钻取功能,并且由于Gordon在堆栈溢出时的解决方案,因此能够将一个可行的解决方案组合在一起。但是,当前我无法弄清楚如何跟踪表中所有单击的行键,以便用户可以撤消已选择的所有过滤器。

已启用行点击过滤的汇总数据表的代码。

//Fake Dimension
rank = function (p) { return "" };

var filterKeys = [];

//Remove any table row that has 0 or a garbage value
function checkRows(d){
    if(d.value.total<=0 || isNaN(d.value.total)||isNaN(d.value.average) ||d.value.average<=0 ||isNaN(d.value.count)||d.value.count<=0 ){
      return 0;
    }
    return d;
  }

//MarketTable
marketTable.width(500)
    .height(480)
    .dimension(AECMarketsGroup)
    .group(rank)
    .columns([function (d) { d=checkRows(d);
                            while(d!=0){
                              return d.key;
                             }
                           },
              function (d) { d=checkRows(d);
                            while(d!=0){
                              return                  
                          formatter(d.value.total);
                            } 
                           },
              function (d) { 
                d=checkRows(d);
                while(d!=0){
                  return formatter(d.value.count);
                }
              },
              function (d) {
                d=checkRows(d);
                while(d!=0){
                  return d.value.average;
                } 
              }])
    .sortBy(function (d) { return d.value.total })
    .order(d3.descending)

  //Enable click filtering
  marketTable.on('pretransition', function (table) {
    table.selectAll('td.dc-table-column')
      .on('click',function(d){           
      if(filterKeys.indexOf(d.key)===-1)
        filterKeys.push(d.key);
      else
        filterKeys = filterKeys.filter(k => k != d.key);
      if(filterKeys.length === 0)
        marketDim.filter(null);
      else 
        marketDim.filterFunction(function(d) {
          return filterKeys.indexOf(d) !== -1;
        })
      dc.redrawAll();
    })
  });

这是所有3个表的js小提琴:https://jsfiddle.net/yashnigam/kvt9xnbs/21/

例如,如果用户单击第一个表中的“欧洲”,单击第二个表中的“ Amazon”,第三次单击“电子产品”,则我想显示用户在向下钻取中采用的路径的痕迹>> Amazon >> Electronics并能够禁用任何已应用的过滤器,比如说我禁用了Amazon,那么过滤器的选择应该是Europe >> Electronics

我遇到的另一件事是我使用dc.filterAll; dc.renderAll;实现的“全部重置”按钮。在跨表进行选择后,不会重置数据。

      <h6 class="dc-data-count" style="float: left;margin-left:5px;">                     
                    <span>
                        <span class="filter-count"></span>
                         selected out of 
                        <span class="total-count"></span>
                         records |  
                       <a  id="reset" 
         href="javascript:dc.filterAll();dc.renderAll();"> Reset All</a>
                   </span>

        </h6>

如果您能帮助我解决我面临的两个问题中的任何一个,那将是非常有用的 1.跟踪过滤器并能够禁用它们 2.使用表中的行或单个表的重置选项进行过滤后,重置所有数据。

请帮助。谢谢!

0 个答案:

没有答案