我喜欢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中的行图类似,请分享一种突出显示数据表行的方法。
请帮助!谢谢。
答案 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)
});
答案 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的初学者