javascript - 单击行 dc.datable 时如何在不丢失过滤的情况下更改颜色

Question

我有以下问题， 当我在 dc.js 中单击表格的行时，我想用另一种颜色标记背景，而不会丢失已完成的过滤。

我注意到命令

dc.redrawAll();

不允许填充行的底部，但如果我删除它，我将失去在单击时过滤其他图形的能力。

tabla.on('pretransition', function (table) {
                 table.selectAll('td.dc-table-column')
                                .on('click',function(d){
                if(filterKeys.indexOf(d.key)===-1)
                  filterKeys.push(d.key);
                else
                  filterKeys = filterKeys.filter(k => k != d.key);
                if(filterKeys.length === 0)
                  foodim.filter(null);
                else 
                    foodim.filterFunction(function(d) {
                    return filterKeys.indexOf(d) !== -1;
                  })
                 //dc.redrawAll();
                });


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

                     console.log($(this))
                    if($(this).hasClass('bg-info')){
                        $(this).removeClass('bg-info'); 
                } else {
                    $(this).addClass('bg-info').siblings().removeClass('bg-info');
                }
                 })

});

谁能帮帮我。 https://jsfiddle.net/ajey2987/kfmfkLj0/18/

Answer 1

我首先在移动设备上尝试了这个，我认为悬停掩盖了你想要的效果，所以我没有看到它。

通常最好让样式尽可能由数据驱动，而不是让许多不同的事件处理程序独立工作来更改样式。

在这种情况下，重绘似乎会导致表格替换元素，从而丢失您的类注释。

相反，我们可以根据行的键是否在 filterKeys 以及 pretransition 处理程序中来教表如何应用您的类:

                 table.selectAll('tr.dc-table-row')
                   .classed('bg-info', function(d) {
                       return filterKeys.indexOf(d.key)!==-1;
                   });

现在我们得到了想要的效果。我认为这段代码也更容易推理。

此外，我发现 bootstrap 的悬停效果会在悬停选定的行时使效果消失。这是因为它有一个更具体的选择器。所以我添加了一个更具体的:

.table-hover>tbody>tr.bg-info:hover>td {
  background-color: #6EaEe6;
}

你的 fiddle 叉:https://jsfiddle.net/gordonwoodhull/e0td50ug/8/