数据表中的多个维度 dc.js

Question

我在数据表中有 5 列 pid, cid, date, types, probability。我可以按单个列 (pid) 进行过滤，但我也想按其他列值进行过滤。

https://blockbuilder.org/ninjakx/f442f5ccbf25eb853c7508194688d25d

第 152 行（index.js）：

// Setup different dimensions for plots
dim.tableMaxConfidence = cf.dimension(function (d) {
  return d.pid;
});

我必须让它进行多维过滤。

第 187 行（index.js）：

.on('pretransition', function (table) {
     table.selectAll('td.dc-table-column._0')
          .on('click',function(d){
                console.log(d);
                table.filter(d.pid)
                dc.redrawAll();
           })
     table.selectAll('td.dc-table-column._1')
          .on('click',function(d){
                console.log("select:",d);
                table.filter(d.cid)
                dc.redrawAll();
           })
     table.selectAll('td.dc-table-column._2')
          .on('click',function(d){
                table.filter(d.date)
                dc.redrawAll();
           })
      table.selectAll('td.dc-table-column._4')
         .style("background-color", function(d){ 
          return color(d.probability)});
  });

这仅适用于 pid，因为维度中只有 pid。

所以我的问题是是否也可以按其他列值进行过滤。如果是，那么如何？

任何提示都将不胜感激。

Answer 1

对于要筛选的每个维度，您都需要一个交叉筛选维度。

数据table 通常使用它的维度来获取数据；它没有内置任何过滤功能。

无需通过 table 筛选，您可以直接进入维度 - 此图表没有任何区别。（您只需要在实现 selection/filtering UI 时使用图表的 .filter()。）

当然，尺寸必须与您过滤的内容相匹配：

 const cidDimension = cf.dimension(d => d.cid),
      dateDimension = cf.dimension(d => d.date);

 table.selectAll('td.dc-table-column._1')
      .on('click',function(d){
            console.log("select:",d);
            cidDimension.filter(d.cid)
            dc.redrawAll();
       })
 table.selectAll('td.dc-table-column._2')
      .on('click',function(d){
            dateDimension.filter(d.date)
            dc.redrawAll();
       })

这些维度之一的重置link需要调用

cidDimension.filter(null);

或

dateDimension.filter(null);

如果您有 "reset all" link，您可以将这些代码添加到其中，或者覆盖 table 的 filterAll:

table.filterAll = () => {
    table.dimension().filter(null); 
    cidDimension.filter(null);
    dateDimension.filter(null);
};

数据表中的多个维度 dc.js

multiple dimension in dataTable dc.js

d3.js

dc.js