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

Question

我喜欢DC.JS库，一直在尝试使用DC.js创建可点击的聚合表格，但只有部分成功。我希望在点击事件中突出显示行（允许多个选择），类似于dc js中的行图表或序数条形图。像行图表一样，当进行多次选择时，应该突出显示多个表格行。

但我无法选择单击的行，而是我的CSS选择第一行，而不管我单击哪一行。我尝试使用“this”关键字来选择当前单击的行，但没有成功。

这是JS Fiddle: https://jsfiddle.net/yashnigam/kvt9xnbs/83/ 这是我的代码，用于使CSS选择点击事件：

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

        })

    });

请分享一种方法，以便在单击数据表的行时突出显示该行，就像在行图表上工作的方式一样。

- Yash Nigam

Answer 1

@Hassan的想法是正确的。我建议选择而不是，并且不要在点击时更改类（这不会在重新绘制后保留），而是在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)
  });

我们根据数组中是否包含行键应用类。这样做直截了当，简单易懂！

您的fiddle的fork。

使用内置过滤器

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

新版本的 fiddle。

- Gordon

---

这太棒了，正是我想要的！谢谢Gordon。 - Yash Nigam

是的，我认为添加点击过滤和行高亮功能将增强聚合数据表。这会非常酷！ - Yash Nigam

你好 @Gordon，我正在制作你在JSFiddle中放置的代码，我想知道你是否可以帮我解决一个问题。当我点击任何一个“按钮”重置时，它只重置所选值的数字。表格仍然以浅蓝色作为背景颜色。你能告诉我如何解决这个问题吗？提前感谢。 - vbernal

感谢 @vbernal。很惊讶我错过了那个。我在上面添加了一个新的部分，其中有更好集成的实现。 - Gordon

嗨，Gordon，我仔细检查后发现图像与我之前向你报告的第一个问题相反。我在这里发布了我找到的解决方案： - vbernal

Answer 2

在你的onclick事件中，给被点击的项添加（切换）一个类似于.sel-rows的类（而不是改变其背景颜色）。现在在你的css中添加以下内容：

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

表格中行的背景颜色在某些浏览器中无法生效。

- Hassan Sadeghi

Answer 3

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

然而，问题被反转了，现在数字保持不变。

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

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方面还是个初学者。

- vbernal