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

Question

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

我无法选择我单击的行，相反，我的 css 会选择第一行，无论我单击哪一行。我尝试使用“this”关键字来选择被单击的当前行，但无济于事。

这是js小提琴：https://jsfiddle.net/yashnigam/kvt9xnbs/83/

这是我进行 CSS 选择的 click 事件的代码：

       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');
            }

        })

    });

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

Answer 1

@Hassan 有正确的想法。我建议选择trs 而不是tds，并且不要在单击时更改类（重绘后无法保存），而是在事件期间应用类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)
  });

我们根据行的键是否在数组中来应用该类。简单直接！

你小提琴的叉子。

使用内置过滤器

@vbernal 指出，当您单击重置链接时，列表不会重置。为了更好地集成这一点，我们可以挂钩表从基本 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])

（注意额外的括号。）

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

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

新版本的小提琴。