DC JS:如何在单击时突出显示聚合数据表中的行，类似于行图? [英] DC JS : How to highlight rows in an aggregated data table on click, similar to a row chart?

问题描述

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

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

这是 js 小提琴:我们根据行的键是否在数组中来应用该类.简单明了！

你的小提琴的叉子.

使用内置过滤器

@vbernal 指出当您单击重置链接时，列表不会重置.为了更好地集成这一点，我们可以挂钩表从基本 mixin 继承的内置过滤器(但通常不使用):

 marketTable.on('pretransition', function (table) {table.selectAll('td.dc-table-column').on('点击',function(d){让过滤器 = table.filters().slice();if(filters.indexOf(d.key)===-1)过滤器.推(d.key)；别的过滤器 = filters.filter(k => k != d.key);table.replaceFilter([过滤器]);dc.redrawAll();});让过滤器 = table.filters();table.selectAll('tr.dc-table-row').classed('sel-rows', d => filters.indexOf(d.key) !== -1);});

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

table.replaceFilter([过滤器])

(注意额外的括号.)

当点击重置链接时，我们重置表格上的过滤器而不是交叉过滤器维度.(最好通过图表操作过滤器，因为图表无法从交叉过滤器维度读取选择状态.)

$('#resetTable').on('click', function() {市场表.过滤器(空)；dc.redrawAll();});

新版本的小提琴.

I love the DC.JS library and have been trying to create a clickable aggregated table in DC.js with partial success. I want to highlight the rows on click event(multiple selections allowed) similar to the row chart or an ordinal bar chart in dc js. Like a row chart, when multiple selections are made, multiple table rows should be highlighted.

I am not able to select the row that I have clicked on, rather, my css selects the first row irrespective of which row I click. I tried to use 'this' keyword to select the current row that was clicked but to no avail.

Here's the js fiddle: https://jsfiddle.net/yashnigam/kvt9xnbs/83/

Here's my code for the click event that makes the 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');
            }

        })

    });

Kindly share a way to highlight rows of data table on click, the same way it works on a row chart.

解决方案

@Hassan has the right idea. I would suggest selecting the trs rather than the tds, and instead of changing the classes on click (which wouldn't survive a redraw), apply the classes also during the pretransition event.

So:

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

We apply the class based on whether the row's key is in the array. Straightforward and simple!

Fork of your fiddle.

using built-in filters

@vbernal pointed out that the list doesn't get reset when you click the reset link. To better integrate this, we can hook into the built-in filters that the table inherits from the base mixin (but doesn't ordinarily use):

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

Instead of setting dimension.filter() ourselves, we fetch the existing table.filters(), toggle as needed, and then set the filters using

table.replaceFilter([filters])

(Note the extra brackets.)

When the reset link is clicked, we reset the filter on the table rather than the crossfilter dimension. (It's always better to manipulate filters through the chart, because charts are not able to read the selection state from the crossfilter dimension.)

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

New version of fiddle.

这篇关于DC JS:如何在单击时突出显示聚合数据表中的行，类似于行图?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！