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

Question

我喜欢DC.JS库，并且一直在尝试部分成功地在DC.js中创建可点击的汇总表。我想突出显示单击事件中的行（允许多次选择），类似于DC JS中的行图或有序条形图。就像折线图一样，当做出多个选择时，应突出显示多个表行。

我无法选择单击的行，而是我的CSS选择第一行，而不管我单击的行。我试图使用'this'关键字来选择被单击但无济于事的当前行。

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

这是我进行点击选择的点击事件的代码：

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

        })

    });

与在dc js中的行图类似，请分享一种突出显示数据表行的方法。

请帮助！谢谢。

Answer 1

@Hassan有正确的想法。我只建议选择td而不是pretransition，并且不要在单击时更改类（重绘后将无法生存），而应在{{1} }事件。

所以：

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

我们基于行的键是否在数组中来应用类。简单明了！

Fork of your fiddle.

Answer 2

在onclick事件中，向单击的项目添加（切换）类似于.sel-rows的类（而不是更改其颜色）。现在在您的CSS中添加以下代码：

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

---

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

Answer 3

正如我之前所说，您（@Gordon）指示的更改有效，当我单击按钮时，表将重新定义而没有任何颜色。

但是，问题反过来了，现在数字保持不变。

我将其与您创建的代码混合在一起，发现的解决方案如下：

<skipAttach>

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

我不知道这是否是最优雅的方法，我仍然是D3，DC和Crossfilter的初学者