heatMap boxOnClick时从dataTable中过滤掉0s的行

Question

我想从我的数据表中过滤掉 FTE 值为 0 的行，但前提是从我的热图中选择了一个框。如果未选择任何框，则数据表应显示 FTE 值为 0 的行。

我发现了这个：https://groups.google.com/forum/#!topic/dc-js-user-group/PgVi1TS8WDw谈论将一个组伪装成一个维度。

数据表维度：

var dimension = ndx.dimension(function (d) {
    return d.Resource + ' ' + d.Month + ' ' + d.FTE;
});

数据表:

var index = 0;      
detailedTable = dc.dataTable('.detailedTable')
    .dimension(dimension)
    .group(function (d) {
        return '';
     })
     .columns([
         function (d) {
             index = index + 1;
             return resultStart + index;
         },
         function (d) {
             return d.Resource;
         },
         function (d) {
             return d.FTE;
         },
         function (d) {
             return d.Month;
         }
      ])
      .size(Infinity)
      .on('renderlet', function (c) {
          index = 0,
          displayResult();
       });

heatMap boxOnClick:

heatMap.boxOnClick(function (d) {

    //filter dataTable here

    //Deflut boxOnClick:
    var filter = d.key;
    dc.events.trigger(function () {
        heatMap.filter(filter);
        heatMap.redrawGroup();
    });
});

https://jsfiddle.net/_M_M_/fcjhxa16/19/

Answer 1

抱歉让我感到困惑 - 如果我这次没有理解错的话，这完全是微不足道的，而且这是您想要 "fake dimension".

的罕见情况之一

假维度将读取原始维度并根据谓词对其进行过滤。谓词会说 "either the row has FTE > 0 or there is nothing selected on the heatMap"

function filtered_dimension(dimension, f) {
  return {
    top: function(N) {
      return dimension.top(N).filter(f);
    },
    bottom: function(N) {
      return dimension.bottom(N).filter(f);
    }
  };
}

var dimension_with_no_fte_zeros_if_heatmap_selected = filtered_dimension(dimension, function(row) {
  return row.FTE || heatMap.filters().length === 0;
});

detailedTable = dc.dataTable('.detailedTable')
  .dimension(dimension_with_no_fte_zeros_if_heatmap_selected)

您不需要点击处理程序 - 这太低级了 - 而且您没有聚合任何东西，只是过滤。

Fork of your fiddle.

heatMap boxOnClick时从dataTable中过滤掉0s的行

filter out rows with 0s from dataTable when heatMap boxOnClick

javascript

d3.js

dc.js