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

时间:2018-07-17 04:16:10

标签: d3.js dc.js

我喜欢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中的行图类似,请分享一种突出显示数据表行的方法。

请帮助!谢谢。

3 个答案:

答案 0 :(得分:3)

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

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

Fork of your fiddle.

答案 1 :(得分:2)

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

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

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

答案 2 :(得分:0)

正如我之前所说,您(@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的初学者