DC JS : How to highlight rows in an aggregated data table on click, similar to a row chart?

问题

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 akin to that of a row chart in dc js.

Please help! Thanks.

回答1:

@Hassan has the right idea. I would only 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.

回答2:

In your onclick event, add (toggle) a class similar .sel-rows to clicked item (instead of change back color of it). Now in your css add this:

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

---

Background color for table rows not work in some browsers.

来源：https://stackoverflow.com/questions/51373150/dc-js-how-to-highlight-rows-in-an-aggregated-data-table-on-click-similar-to-a