DC JS：如何在单击时突出显示聚合数据 table 中的行，类似于行图表？

Question

我喜欢 DC.JS 库，并且一直在尝试在 DC.js 中创建可点击的聚合 table，并取得了部分成功。我想突出显示单击事件中的行（允许多个 select 离子），类似于 dc js 中的行图或有序条形图。像条形图一样，当制作了多个 select 离子时，应突出显示多个 table 行。

我无法 select 我点击的行，而是我的 css select 第一行，无论我点击哪一行。我尝试使用 'this' 关键字来 select 单击的当前行但无济于事。

这是 js fiddle：https://jsfiddle.net/yashnigam/kvt9xnbs/83/

这是我的点击事件代码，它使 css selection:

       marketTable.on("renderlet", function(chart){

        chart.selectAll('tr.dc-table-row').on('click',function(d){

            if(filterKeys.includes(d.key)){

             chart.select('tr.dc-table-row').datum(d.key).style('background-color','gray');
            }

        })

    });

请分享一种在点击时突出显示数据行的方法 table，与在行图上的工作方式相同。

Answer 1

在您的 onclick 事件中，添加（切换）一个 class 类似于 .sel-rows 被点击的项目（而不是改变它的背景颜色）。现在在您的 css 中添加：

.sel-rows td{
     background-color: gray;
}

table 行的背景颜色在某些浏览器中不起作用。

Answer 2

@Hassan 的想法是正确的。我建议选择 trs 而不是 tds，而不是在单击时更改 classes（重绘后无法生存），应用 class也在 pretransition 事件期间。

所以：

tr.dc-table-row.sel-rows {
     background-color: lightblue;
}

marketTable.on('pretransition', function (table) {
    table.selectAll('td.dc-table-column')
      .on('click', /* ... */)
    table.selectAll('tr.dc-table-row')
        .classed('sel-rows', d => filterKeys.indexOf(d.key) !== -1)
  });

我们根据行的键是否在数组中应用 class。简单明了！

Fork of your fiddle.

使用内置过滤器

@vbernal 指出当您单击重置时列表不会重置 link。为了更好地集成它，我们可以挂钩到 table 从基础 mixin 继承的内置过滤器（但通常不使用）：

  marketTable.on('pretransition', function (table) {
      table.selectAll('td.dc-table-column')
          .on('click',function(d){    
              let filters = table.filters().slice();
              if(filters.indexOf(d.key)===-1)
                  filters.push(d.key);
              else
                  filters = filters.filter(k => k != d.key);
              table.replaceFilter([filters]);
              dc.redrawAll();
          });
      let filters = table.filters();
      table.selectAll('tr.dc-table-row')
          .classed('sel-rows', d => filters.indexOf(d.key) !== -1);
  });

我们不是自己设置 dimension.filter()，而是获取现有的 table.filters()，根据需要进行切换，然后使用

设置过滤器

table.replaceFilter([filters])

（注意多余的括号。）

单击重置 link 时，我们会在 table 而不是交叉过滤器维度上重置过滤器。（通过图表操作过滤器总是更好，因为图表无法从交叉过滤器维度读取选择状态。）

$('#resetTable').on('click', function() {
  marketTable.filter(null);
  dc.redrawAll();
});

New version of fiddle.

Answer 3

正如我之前所说，您 (@Gordon) 指出的更改有效，当我单击按钮时，table 被重新定义，没有任何颜色。

不过，问题反过来了，现在数字还是一样。

我将它与您创建的代码混合使用，我找到的解决方案如下：

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

      table.replaceFilter([filters]);
      dc.redrawAll();
    });
  let filters = table.filters();
  table.selectAll('tr.dc-table-row')
    .classed('sel-rows', d => filters.indexOf(d.key) !== -1);
});

$('#reset').on('click', function() {
  marketTable.filter(null);
  marketDim.filter(null)
  vendorDim.filter(null)
  CategoryDim.filter(null)

  dc.redrawAll();
});

$('#resetTable').on('click', function() {
  marketTable.filter(null);
  marketDim.filter(null)

  dc.redrawAll();
});

我不知道这样做是否是最优雅的方式，我在 D3、DC 和 Crossfilter 方面仍然是初学者

DC JS：如何在单击时突出显示聚合数据 table 中的行，类似于行图表？

DC JS : How to highlight rows in an aggregated data table on click, similar to a row chart?

d3.js

dc.js

使用内置过滤器